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. 然后我想從第一選擇框切換選擇，所以我選擇了“水果”。

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

在select1的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
});