我有两个选择：
<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？第二选择将显示我只有水果 – 香蕉，苹果，橙。如果我选择鸟在第一次选择，第二次选择将显示我只鸟 – 鹰，鹰。等等…
我试图这样做用这块jQuery代码：
$("#select1").change(function() {
var id = $(this).val();
$('#select2 option[value!='+id+']').remove();
});
不幸的是，它几乎去除了一切，我不知道如何带回一些选项。我也读了一些关于克隆，但我不知道如何使用它在这种情况下。
解决方法
$("#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.
