jquery - 使用 jQuery 根据第一个选择列表选项更改第二个选择列表

Question

我有两个选择:

<select name="select1" id="select1">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
</select>

<select name="select2" id="select2">
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM<option>
</select>

如果我在第一个选择中选择 Fruit，我如何使用 jQuery 做到这一点？第二个选择只会显示水果 - 香蕉、苹果、橙子。如果我在第一个选择中选择 Bird，第二个选择将只显示 Birds - Eagle、Hawk。等等……

我试着用这段 jQuery 代码来做到这一点:

$("#select1").change(function() {
    var id = $(this).val();
    $('#select2 option[value!='+id+']').remove();
});

不幸的是，它几乎删除了所有内容，我不知道如何恢复一些选项。我还阅读了一些有关克隆的内容，但我不知道在这种情况下如何使用它。

Answer 1

$("#select1").change(function() {
  if ($(this).data('options') === undefined) {
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options', $('#select2 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[value=' + id + ']');
  $('#select2').html(options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
  <option value="1">Fruit</option>
  <option value="2">Animal</option>
  <option value="3">Bird</option>
  <option value="4">Car</option>
</select>


<select name="select2" id="select2">
  <option value="1">Banana</option>
  <option value="1">Apple</option>
  <option value="1">Orange</option>
  <option value="2">Wolf</option>
  <option value="2">Fox</option>
  <option value="2">Bear</option>
  <option value="3">Eagle</option>
  <option value="3">Hawk</option>
  <option value="4">BWM<option>
</select>

使用 jQuery data()存储数据

I guess hiding elements doesn't work cross-browser(2012), I have'nt tested it myself.