如何根据另一select选项更改select选项？
这里是我的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中select一个选项，然后大小select填充与选项关联。 我怎么能做到这一点？
谢谢
这里是你正在尝试做的一个例子：
$(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>
您可以在html5中使用数据标签 ，并使用以下代码执行此操作：
<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>
你的if语句是设置值。 你想通过这样比较它
if ($("#type").val() == "item1") { ... }
daLizard是正确的。 你想要一个事件处理程序。 当页面DOM准备好被使用时，document.ready只运行一次。
我不明白你想要实现什么，但你需要一个事件监听器。 就像是：
$('#type').change(function() { alert('Value changed to ' + $(this).attr('value')); });
这会给你所选选项标签的值。
