如何在第一个下拉列表中使用所选值填充第二个下拉列表？
假设我的jsp加载时填充了两个下拉列表
-- first drop down 1 2 -- second drop down A -- sub group associated with option value 001 B C D E/option> F -- sub group associated with option value 002 G H I 现在我需要根据第一个下拉列表中的选定值过滤第二个下拉列表。 我不能使用使用DB回调方法的PHP代码。 在我的剧本中，我有类似的东西。
$("#Group").change(function() { var groupVal = $(this).find("option:selected").val(); $('#subGroup option').filter(function( {return!$(this).val().indexOf(groupVal)!=-1);}).remove(); });
该脚本工作正常，它删除所有选项以外的所有选项。 但我的问题是，下次当我在第一次下拉中选择其他值时，第二次下拉变为空。 我甚至使用了hide / show但猜猜他们不会用 🙁
当我在第一次下拉中选择其他选项时，有什么方法可以重新填充第二次下拉？
如果要删除元素，则不会将其删除。 你自己建议使用hide()和show() ：
$("#Group").change(function() { var groupVal = $(this).find("option:selected").val(); $('#subGroup option').hide(); $('#subGroup option[value^='+groupVal+']').show(); });
换句话说，每次更改#Group框时，都会隐藏#subGroup所有选项，并仅显示其value属性以groupVal开头的groupVal 。
在页面加载时，将第二个选择框的所有选项存储到数组中。 然后在更改时填充该数组中的选择框。 您正在删除第二批“选项”，以便下次要使用它们时不再存在这些选项。
为此，您需要在某处存储所有可用选项，然后从该数据集重新填充。 例如
var availableOptions = { 'groupOne': {/* options as {value: '', text: ''} */}, 'groupTwo': {/* options as {value: '', text: ''} */} }; $("#Group").change(function() { var groupVal = $(this).find("option:selected").val(); var sub = $('#Subgroup'); $.each(availableOptions[groupVal], function(i, data){ sub.append(''); });
Remy Sharp还有一个相关的选择框插件，如果您想尝试，我已经取得了成功：
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/