Make sure selected value is shown in first select input field

Question

I have two select input fields as shown below. The second select input field gets populated using jquery when first select input field value is selected. The newly populated has first option set as selected by default.

When I switch between one select option to another in first input field. The selected value does switch from one option value to another but the dropdown shows newly selected value and falls back to first option whereas selected="selected" is still set to new option selected. I dont know why does the value shown in dropdown falls back to first.

below is my code

<select id="filter_type" name="filter_type" class="selectpicker form-control" style="width:30%;">
                        <option value>Select Filter Type..</option>
                        <option value="abc">abc</option>
                        <option value="def">def</option>
                        <option value="ghi">ghi</option>
                        <option value="jkl">Jkl</option>

                    </select>
            <select id="search" name="search" class="selectpicker form-control" disabled="disabled" style="width:70%;">
                       <option value>select filter type first</option>
                       </select>

JS

$(document).ready(function()
{
$("#filter_type").change(function()
{
  var id=$(this).val();
  $.ajax
  ({
    type: "GET",
    url: "{{url('/users/xyz')}}",
    data: {id : id},
  }).done( function(data)
  {
      //I am clearing any appended value in second select input field
      $('#search').empty();
      //I am clearing any selected attribute
      $('#filter_type option[selected="selected"]').removeAttr('selected');

      $.each(data, function (key, data) {
      console.log(data);

      //If nothing is selected simply disable second select input field and submit button
      if(id == '')
      {
          $('#search').append($('<option>', { 
          value: '',
          text : 'select filter type first' 
          }));
          $('#search').attr('disabled', 'disabled');
          $('#submit').attr('disabled', 'disabled');
          return false;
      }
      if(id == 'abc')
      {
          $('#search').append($('<option>', { 
            value: data.id,
            text : data.abc_name
          }));

          $("#filter_type option:nth-child(3)").attr('selected','selected');
          $("#search option:first").attr('selected','selected');
          $('#search').removeAttr('disabled');
          $('#submit').removeAttr('disabled');

      }else if(id == 'def')
      {
        $('#search').append($('<option>', { 
            value: data.id,
            text : data.def_name
        }));
        $("#filter_type option:nth-child(2)").attr('selected','selected');
        $("#search option:first").attr('selected','selected');
        $('#search').removeAttr('disabled');
        $('#submit').removeAttr('disabled');
      }
      else if(id == 'ghi')
      {
        $('#search').append($('<option>', { 
            value: data.id,
            text : data.ghi_name
        }));
        $("#filter_type option:nth-child(4)").attr('selected','selected');
        $("#search option:first").attr('selected','selected');
        $('#search').removeAttr('disabled');
        $('#submit').removeAttr('disabled');
      }
      else if(id == 'jkl')
      {
        $('#search').append($('<option>', { 
          value: data.id,
          text : data.jkl
        }));
        $("#filter_type option:nth-child(5)").attr('selected','selected');
        $("#search option:first").attr('selected','selected');
        $('#search').removeAttr('disabled');
        $('#submit').removeAttr('disabled');
      }
    });
   });
 });

 $(document).on('change', 'select', function () {

        $('#search option[selected="selected"]').each(
          function() 
          {
            $(this).removeAttr('selected');
          }
        );
        var value = $(this).val();
        $(this).find('option[value="' + value + '"]').attr("selected", "selected");
    });

Above code works just fine.

The issue is first select input field shows first option whereas selected value is something elsed (that is the value chosen from the drop-down). I want to show the value that is selected by user in the drop-down.

If I remove this line :

$('#filter_type option[selected="selected"]').removeAttr('selected');

then the problem of showing right option in select box is fixed but then I have multiple selected value as I play with the dropdown.

screenshots

Initially

On selecting campus

On selecting year and then department one by one.

Answer 1

Actually your following statement is not removing the selected attribute

$('#filter_type option[selected="selected"]').removeAttr('selected');

use the following statement instead :

$('#filter_type').val(undefined);

Try doing select state change like this:

if(id == 'abc')
{
    $('#search').append($('<option>', {
        value: data.id,
        text : data.abc_name
    }));

    $("#filter_type").val('abc');
    $("#search option:first").attr('selected','selected');
    $('#search').removeAttr('disabled');
    $('#submit').removeAttr('disabled');
}

And so on for the others