jQuery将选择框设置为空选项

Question

这是我正在使用的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>而不是在第二个选择框中先前选择的选项.

为了方便起见,我将其分成几个点.

1. 在第一个选择框示例"动物"中选择了一个选项.

   <select name="" id="select1"> <option value=""></option> <option value="1">Animals</option> <option value="2">Games</option> <option value="3">Fruits</option> </select>

2. 在第二个选择框中获得了一些值.

   <select name="" id="select2"> <option value=""></option> <option value="1">Cat</option> <option value="2">Dog</option> <option value="3">Monkey</option> </select>

3. 从第二个选择框示例"Dog"中选择一个值.

4. 然后我想从第一个选择框切换选择,所以我选择了"Fruits".

5. 在第二个选择框中获得了一些值.

   <select name="" id="select2"> <option value=""></option> <option value="1">Apple</option> <option value="2">Banana</option> <option value="3">Grapes</option> </select>

6. 我这次选择了葡萄.好的,好到这里.

7. 但是如果我再次将我的第一个选择更改为动物,我应该让第二个选择框以空选项(空白字段)开始,但相反它从先前选择的"狗"开始.这是我不想要的.每次我更改从第一个选择框中选择选项时,我希望第二个选择框以空白选项字段开头,这样我就可以再次从完整列表中选择,即"猫","狗","猴子".

Answer 1

添加$('#select2').val('')最后一个select1更改事件,如下所示.

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