Question

当我从下拉测试1选项中选择值为a

时，我想要两个下拉列表

第二个下拉列表test2仅显示值为a

的选项

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

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，您可以检查option中所选test1的值，隐藏test2中不匹配的所有内容，然后显示匹配的{{1} }}

value

Answer 3

或者你可以这样：

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

fiddle

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

3 个答案: