使用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); }); });
