使用jQuery根据第一个select列表选项更改第二个select列表

我有两个select:

<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> 

如果我在第一个select中selectFruit,我该如何使用jQuery来做到这一点? 第二个select将显示我只水果 – 香蕉,苹果,橙。 如果我在第一个select中select了Bird,第二个select只会显示我Bird – Eagle,Hawk。 等等…

我试图用这段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> 

我想做一个使用$ .getJSON()从一个单独的JSON文件的版本。

演示: 在这里

JavaScript的:

 $(document).ready(function () { "use strict"; var selectData, $states; function updateSelects() { var cities = $.map(selectData[this.value], function (city) { return $("<option />").text(city); }); $("#city_names").empty().append(cities); } $.getJSON("updateSelect.json", function (data) { var state; selectData = data; $states = $("#us_states").on("change", updateSelects); for (state in selectData) { $("<option />").text(state).appendTo($states); } $states.change(); }); }); 

HTML:

 <!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> </head> <body> <select id="us_states"></select> <select id="city_names"></select> <script type="text/javascript" src="updateSelect.js"></script> </body> </html> 

JSON:

 { "NE": [ "Smallville", "Bigville" ], "CA": [ "Sunnyvale", "Druryburg", "Vickslake" ], "MI": [ "Lakeside", "Fireside", "Chatsville" ] } 

将所有#select2选项存储在一个variables中,根据#select1所选选项的值进行过滤,并在#select2使用.html()进行设置:

 var $select1 = $( '#select1' ), $select2 = $( '#select2' ), $options = $select2.find( 'option' ); $select1.on('change', function() { $select2.html($options.filter('[value="' + this.value + '"]')); }).trigger('change'); 

这是一个小提琴

我build立在sabithpocker的想法上,做了一个更广义的版本,可以让你从一个给定的触发器控制多个select框。

我分配的select框我想被控制类名“可切换”,并克隆他们都是这样的:

 $j(this).data('options',$j('select.switchable option').clone()); 

并对可切换的select使用了特定的命名约定,这也可以转换为类。 就我而言,“类别”和“发行者”是select名称,“category_2”和“issuer_1”是类别名称。

然后,我在$ select()这个函数里面使用了一个$ .each在select.switchable组中:

 var that = this; $j("select.switchable").each(function() { var thisname = $j(this).attr('name'); var theseoptions = $j(that).data('options').filter( '.' + thisname + '_' + id ); $j(this).html(theseoptions); }); 

通过在你想要控制的类上使用一个类名,这个函数将安全地忽略页面其他地方的select(比如在Fiddle上的例子中的最后一个)。

这是一个完整的代码小提琴 :

所有这些方法都很棒。 我发现了另一个简单的资源,就是使用AJAX的“onchange”创builddynamic表单的一个很好的例子。

http://www.w3schools.com/php/php_ajax_database.asp

我只是修改了文本表输出到另一个select下拉填充基于第一个下拉select。 对于我的应用程序,用户将select一个状态,然后第二个下拉列表将填充所选状态的城市。 很像上面的JSON示例,但使用php和mysql。

我发现解决scheme如下…为我工作完美:)

 $(document).ready(function(){ $("#selectbox1").change(function() { var id = $(this).val(); $("#selectbox2").val(id); }); });