根据第一个下拉列表的选定值填充第二个下拉列表

当我从下拉test1选项中选择值为a时，我想要两个下拉列表

第二个下拉测试2仅显示具有值a的选项

 Select a b c   Select a b c 1 2 3 c  

Answer 1

既然你用JQuery标记了这个，如果我根本不改变你的HTML，你可以通过改变你的onchange的JS来做到这一点：

 document.getElementById('test2').value=this.value 

。 。 。 对此：

 $("test2").find("option").hide(); $("test2").find("[value^='" + $("test1").val() + "']").show(); 

这将隐藏“test2”下拉列表中的所有选项，然后显示所有具有以当前所选“test1”选项的值开头的值的选项。

注意：如果您选择更新代码仅使用“test1”值作为“test2”值的前缀，这也将起作用。 ;）

更新：修复了代码中的拼写错误。

Answer 2

就像它说的那样，你真的不想这样做，因为每个选项都应该有一个独特的价值……但是这是实现它的一种方法： jsFiddle

使用jQuery，您可以检查test1所选option的值，隐藏test2中不匹配的所有option ，然后显示具有匹配value那些选项。

 $('#test1').on('change', function() { $('#test2 option:not(option[value='+$(this).val()+'])').hide(); $('#test2 option[value='+$(this).val()+']').show(); }); 

Answer 3

或者你可以这样：

 jQuery(document).ready(function($){ var options = $('#test2 option'); $('#test1').on('change', function(e){ $('#test2').append(options); $('#test2 option[value!=' + $(this).val() +']').remove(); }); }); 

小提琴