如何根据所选的其他选择选项更改选择选项？

Question

这是我的HTML.

<select id="type">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>

<select id="size">
<option value="">-- select one -- </option>
</select>

这是我试过的jquery,但没有成功.

$(document).ready(function() {

if( $("#type").val("item1"))
{
  $("#size").html("<option value='test'>test</option><option value="test2">test2</option>);
}
elseif( $("#type").val("item2"))
{
   $("#size").html("<option value='anothertest1'>anothertest1</option>");
}

});

基本上我想要做的是如果在#type中选择了一个选项,那么大小选择将填充与之关联的选项.我怎样才能做到这一点？

谢谢

Answer 1

以下是您要尝试执行的操作的示例:

http://jsfiddle.net/YPsqQ/

$(document).ready(function () {
    $("#type").change(function () {
        var val = $(this).val();
        if (val == "item1") {
            $("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
        } else if (val == "item2") {
            $("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
        } else if (val == "item3") {
            $("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
        } else if (val == "item0") {
            $("#size").html("<option value=''>--select one--</option>");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="type">
    <option value="item0">--Select an Item--</option>
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

<select id="size">
    <option value="">-- select one -- </option>
</select>

Answer 2

您可以在html5中使用data-tag并使用以下代码执行此操作:

<script>
	$('#mainCat').on('change', function() {
		var selected = $(this).val();
		$("#expertCat option").each(function(item){
			console.log(selected) ;  
			var element =  $(this) ; 
			console.log(element.data("tag")) ; 
			if (element.data("tag") != selected){
				element.hide() ; 
			}else{
				element.show();
			}
		}) ; 
		
		$("#expertCat").val($("#expertCat option:visible:first").val());
		
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<select id="mainCat">
			<option value = '1'>navid</option>
			<option value = '2'>javad</option>
			<option value = '3'>mamal</option>
		</select>
		
		<select id="expertCat">
			<option  value = '1' data-tag='2'>UI</option>
			<option  value = '2' data-tag='2'>Java Android</option>
			<option  value = '3' data-tag='1'>Web</option>
			<option  value = '3' data-tag='1'>Server</option>
			<option  value = '3' data-tag='3'>Back End</option>
			<option  value = '3' data-tag='3'>.net</option>
		</select>