使用jQuery根据第一个选择列表选项更改第二个选择列表 [英] Use jQuery to change a second select list based on the first select list option
问题描述
我有两个选择：
< select name =select1id =select1>
< option value =1>水果< / option>
< option value =2>动物< / option>
< option value =3> Bird< / option>
< option value =4>汽车< / option>
< / select>
< option value =1>香蕉< / option>
< option value =1> Apple< / option>
< option value =1>橙色< /选项>
< option value =2> Wolf< / option>
< option value =2> Fox< / option>
< option value =2>熊< / option>
< option value =3> Eagle< / option>
< option value =3> Hawk< / option>
< option value =4> BWM< option>
< / select>
如果我在第一次选择中选择Fruit，我该如何使用jQuery？第二个选择只会显示水果 - 香蕉，苹果，橙子。如果我在第一个选择中选择了Bird，第二个选择只会让我看到Birds - Eagle，Hawk。等等......
我试图用这段jQuery代码来完成它：
（$＃$ c $>＃select1）。 ='+ id +']'）。remove（）;
}）;
不幸的是，它几乎消除了一切，我不知道如何恢复某些选项。我也读了一些关于克隆的内容，但是我不知道如何在这种情况下使用它。
$（＃select1）。change（function（）{if（$（this）.data（'options'）=== undefined）{/ *获取所有选项的数组2并将其嵌入到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 =select1id =select1> < option value =1>水果< / option> < option value =2>动物< / option> < option value =3> Bird< / option> < option value =4> Car< / option>< / select>< select name =select2id =select2> < option value =1>香蕉< / option> < option value =1> Apple< / option> < option value =1>橙色< /选项> < option value =2> Wolf< / option> < option value =2> Fox< / option> < option value =2>熊< / option> < option value =3> Eagle< / option> < option value =3> Hawk< / option> < option value =4> BWM< option>< / select>
b $ b
使用jQuery data（）存储数据
我猜隐藏元素不适用于跨浏览器（2012），我自己也没有测试过
。
I have two selects:
<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>
How do I do that with jQuery if I choose Fruit in the first select? The second select would show me only Fruits - Banana, Apple, Orange. If I choose Bird in the first select, the second select would show me only Birds - Eagle, Hawk. And so on...
I tried to do it with this piece of jQuery code:
$("#select1").change(function() {
var id = $(this).val();
$('#select2 option[value!='+id+']').remove();
});
Unfortunately, it removes almost everything, and I have no idea how to bring back some options. I also read something about clone, but I don't know how to use it in this case.
$("#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>
Using jQuery data() to store data
I guess hiding elements doesn't work cross-browser(2012), I have'nt tested it myself.
这篇关于使用jQuery根据第一个选择列表选项更改第二个选择列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
