填充基于第一个下拉列表中选择的值第二个下拉

我有两个下拉当我选择，例如从值下拉test1的选项，我希望有一个填充基于第一个下拉列表中选择的值第二个下拉

第二个下拉test2的只显示有值的选项

<select name="test1" id="test1" onchange="document.getElementById('test2').value=this.value"> 
    <option value="Select">Select</option> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 
</select> 


<select id="test2" name="test2"> 
<option value="Select">Select</option> 
    <option value="a">a</option> 
    <option value="a">b</option> 
    <option value="a">c</option> 
    <option value="b">1</option> 
    <option value="b">2</option> 
    <option value="b">3</option> 
    <option value="c">c</option> 
</select>

来源

2013-12-10 JackNew

你真的不想做这种方式。。。每个选项应该有一个独特的价值。您可以使用“test1”中的值作为“test2”中的值的前缀（例如，“aa”，“ab”，“ac”，“b1”，“b2”等），但每个值应该独一无二。 – talemyn

我知道每个值应该是唯一的，但只想知道它是如何完成的HTML目的只 – JackNew

可能的重复[如何用JQuery填充级联下拉列表]（http://stackoverflow.com/questions/18351921/how-使用jQuery来填充一个级联下拉列表） – Daveo

既然你已经标记这与jQuery，如果我不改变你的HTML可言，你可以从这个改变JS在你onchange做到这一点：

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

。。。为此：

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

这将隐藏所有的选项，在“TEST2”下拉列表，然后显示所有具有与当前选定的“测试1”选项的值开始值的那些的。

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

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

来源

2013-12-10 22:41:16 talemyn

就像有人说，你真的不想做这种方式为每个选项应该有一个独特的价值....但在这里是一种方式来完成它：jsFiddle

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

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

来源

2013-12-10 22:41:17 Brian

你确定它在chrome中工作，或者只是我的浏览器在搞乱？ –

应该是，我在Chrome中创建了它。 – Brian

或者你可以这样说：

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

fiddle

来源

2013-12-10 22:48:27

填充基于第一个下拉列表中选择的值第二个下拉

回答

相关问题