Populate Select Option Boxes using j Query via ajax call

Question

I have a drop-down(select field) which i am populating on the basis of another drop-down selected by the user

• on selecting the first option the second drop-down field populating perfectly
• but when user selects another option the new drop-down goes into option and appears with previous one

• what i am trying to achieve is when user clicks on any drop-down of first select field then its respective value should populate into the other drop-down

  <form action="" method="post" id="form1">
      <div class="row position-relative">
          <div class="col-4 brder p-1">
              <h5>Outlet Name</h5>
          </div>
          <div class="col-8  brder">
              <select class="form-control col-4" id="myselect"
                  name="outlet">
                  <option>Select Outlet</option>
              </select>                   
          </div>
          <div class="col-4 brder p-1">
              <h5>Outlet Code</h5>
          </div>
          <div class="col-8  brder">
              <select class="form-control col-4" id="outletCode"
                  name="outletCode" >                     
              </select>                   
          </div>              
      </div>          
  </form>
  

Ajax call to populate the first select option

  $.ajax({
              async: true,
              url : "OutletList",
                method : "GET",
                dataType : "json",
                contentType: "application/json; charset=utf-8",
                success: function( json ) {
                    $.each(json, function(i, value) {
                        $('#myselect').append($('<option>').text(value).attr('value', value));
                    });
                }
            });

the above code will populate the first select option

below one to populate new select option on the basis of 1st one

$('#myselect').on('change', function() {
        var selectedOutlet =this.value;
        alert(selectedOutlet);              
          $.ajax({
              async: true,
              url : "OutletCode",
                method : "GET",
                dataType : "json",
                contentType: "application/json; charset=utf-8",
                success: function( json ) {
                    $.each(json, function(i, value) {
                        $('#outletCode').append($('<option>').text(value).attr('value', value));
                    });
                }
            });

        });

This code is working fine but not populating the data as i wanted

• on selecting first select option the other drop-down is populating with the respective value of first one,but when user again clicks on the first select field it populates the second select field with the new drop down,but the previous value remain there also
• i just want to populate only one value in second select field i.e outletCode

Answer 1

You need to remove the preview options. You can put this code on success callback to remove all preview options:

$('#outletCode option').remove()

$('#myselect').on('change', function() {
        var selectedOutlet =this.value;
        alert(selectedOutlet);              
          $.ajax({
              async: true,
              url : "OutletCode",
                method : "GET",
                dataType : "json",
                contentType: "application/json; charset=utf-8",
                success: function( json ) {
                    # Remove preview options
                    $('#outletCode option').remove()
                    $.each(json, function(i, value) {
                        $('#outletCode').append($('<option>').text(value).attr('value', value));
                    });
                }
            });

        });

Answer 2

It is because you use append on the second dropdown:

$('#outletCode').append($('').text(value).attr('value', value));

You have to remove the previously appended option to the second dropdown each time you append a new option. You can save the previous option in a global variable and remove it each time you append a new option to the second dropdown.

var previousOption;
$('#myselect').on('change', function() {
        var selectedOutlet =this.value;
        alert(selectedOutlet);              
          $.ajax({
              async: true,
              url : "OutletCode",
                method : "GET",
                dataType : "json",
                contentType: "application/json; charset=utf-8",
                success: function( json ) {
                    $.each(json, function(i, value) {
                        $('#outletCode').append($('<option>').text(value).attr('value', value));
                        $("#outletCode option[value="+previousOption]).remove();
                        previousOption = value;
                    });
                }
            });

        });