jQuery设置下拉框为空选项。

Question

jQuery设置下拉框为空选项。

8

这是我正在使用的jQuery代码，它可以在我更改第一个下拉框时帮助我获取需要的下拉框值。

$(document).ready(function () {
    $("#select1").change(function(){
      $('.quantity').val('');
      $('#trblock').fadeIn();
      if ($(this).data('options') == undefined) {
        $(this).data('options', $('#select2 option').clone());
      }
      var id = $(this).val();
      var options = $(this).data('options').filter('[value=' + id + ']');
      $('#select2').html('<option value="">').append(options);
    });
});

这里发生的情况是，每当我更改第一个选择框中的选项时，第二个选择框会显示一些值。但是当我回滚到先前选择的选项时，我发现第二个选择框已经显示了我先前选择的选项。我的要求是，每当我更改第一个选择框中的选项时，第二个选择框应该以空白选项开始，例如 <option value=""></option>，而不是第二个选择框中之前选定的选项。

为了简单起见，我将其分解成几个步骤：

选择第一个选择框中的选项，例如“动物”。

<select name="" id="select1"> <option value=""></option> <option value="1">动物</option> <option value="2">游戏</option> <option value="3">水果</option> </select>
在第二个选择框中获取一些值。

<select name="" id="select2"> <option value=""></option> <option value="1">猫</option> <option value="2">狗</option> <option value="3">猴子</option> </select>
从第二个选择框中选择一个值，例如“狗”。
然后我想改变第一个选择框中的选择，所以我选择了“水果”。
在第二个选择框中获取一些值。

<select name="" id="select2"> <option value=""></option> <option value="1">苹果</option> <option value="2">香蕉</option> <option value="3">葡萄</option> </select>
这次我选择了葡萄。到此为止还好。
但是，如果我再次将第一次选择更改为动物，则应该使第二个选择框以空白选项（空字段）开始，但它却以之前选择的“狗”开始。我不希望出现这种情况。每次我更改第一个选择框中的选项时，我都希望第二个选择框以空白选项字段开始，以便我可以从完整列表中再次进行选择，即“猫”，“狗”，“猴子”。

- user6224087

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ibrahim Khan · Accepted Answer

在的change事件最后添加$('#select2').val('')，如下所示。

$("#select1").change(function () {
    $('.quantity').val('');
    $('#trblock').fadeIn();
    if ($(this).data('options') == undefined) {
        $(this).data('options', $('#select2 option').clone());
    }
    var id = $(this).val();
    var options = $(this).data('options').filter('[value=' + id + ']');
    $('#select2').html('<option value="">').append(options);

    $('#select2').val(''); //add this line
});