确保在第一个选择输入字段中显示所选值

Question

我有两个选择输入字段，如下所示。当选择第一个选择输入字段值时，使用jquery填充第二个选择输入字段。新填充的第一个选项设置为默认选择。

当我在第一个输入字段中将一个选项切换到另一个选项时。所选值确实从一个选项值切换到另一个选项值，但下拉列表显示新选择的值并回退到第一个选项，而选中=＆＃34;选择＆＃34;仍然设置为选择新选项。我不知道为什么下拉列表中显示的值会回落到第一位。

下面的

是我的代码

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

上面的代码工作正常。

问题是首先选择输入字段显示第一个选项，而选择的值是elsed（即从下拉列表中选择的值）。我想在下拉列表中显示用户选择的值。

如果我删除此行：

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

等等其他人