如何根据所选的另一选择选项更改选择选项？

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

你如果声明是设置值。你想通过这样做比较

if ($("#type").val() == "item1") { 
... 
} 

daLizard是正确的。你想要一个事件处理程序。当页面DOM准备好使用时，document.ready只运行一次。

Answer 3

我不明白你想达到什么，但你需要一个事件监听器。例如：

$('#type').change(function() { 
    alert('Value changed to ' + $(this).attr('value')); 
}); 

这会给你所选选项标记的值。

Answer 4

你可以在HTML5中使用数据标记，做这个使用此代码：

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

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