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

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

以此類推