確保所選值顯示在第一個選擇輸入字段中

Question

我有兩個選擇輸入字段，如下所示。當選擇第一個選擇輸入字段值時，第二個選擇輸入字段會使用jquery填充。新填充的第一個選項設置爲默認選擇。

當我在第一個輸入字段中的一個選擇選項與另一個選擇選項之間切換時。所選值從一個選項值切換到另一個選項值，但下拉菜單顯示新選定的值並返回到第一個選項，而selected =「selected」仍然設置爲選擇的新選項。我不知道爲什麼下拉菜單中顯示的值回落到第一位。下面

是我的代碼

<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"); 
    }); 

上面的代碼工作就好了。

問題是第一個選擇輸入字段顯示第一個選項，而選定的值是刪除的東西（即從下拉列表中選擇的值）。我想要顯示用戶在下拉列表中選擇的值。

如果我刪除此行：

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

則表示選擇框中正確的選擇的問題是固定的，但後來我有多個選擇的值作爲我的下拉玩。

截圖

最初

在選擇校園

由一個選擇一年，然後部門之一。

Answer 1

其實你下面的語句不刪除選擇屬性

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

使用下面的語句來代替：

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

嘗試做選擇狀態的變化是這樣的：

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'); 
} 

依此類推