jQuery 如何根据选择的另一个选择选项更改选择选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4480637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change a selections options based on another select option selected?
提问by sarmenhbbi
here is my html.
这是我的 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>
here is the jquery i tried but was unsuccessful.
这是我尝试过但未成功的 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>");
}
});
basically what i'm trying to do is if an option is selected in #type then the size select is populated with options associated to it. how can i do this?
基本上我想要做的是，如果在#type 中选择了一个选项，那么大小选择将填充与其关联的选项。我怎样才能做到这一点？
thanks
谢谢
回答by rcravens
Here is an example of what you are trying to do => fiddle
这是您尝试执行的操作的示例 =>小提琴
$(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>回答by Navid_pdp11
you can use data-tagin html5 and do this using this code:
您可以在 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>回答by pramod
回答by Pomanh
as a complementary answer to @Navid_pdp11, which will enable to select the first visible item and work on document load as well. put the following below your body tag
作为@Navid_pdp11 的补充答案，它将能够选择第一个可见项目并处理文档加载。将以下内容放在您的身体标签下方
<script>
$('#mainCat').on('change', function() {
let selected = $(this).val();
$("#expertCat option").each(function(){
let element = $(this) ;
if (element.data("tag") != selected){
element.removeClass('visible');
element.addClass('hidden');
element.hide() ;
}else{
element.removeClass('hidden');
element.addClass('visible');
element.show();
}
});
let expertCat = $('#expertCat');
expertCat.prop('selectedIndex',expertCat.find("option.visible:eq(0)").index());
}).triggerHandler('change');
</script>
回答by Rashid
You can use switch case like this:
您可以像这样使用 switch case：
$(document).ready(function () {
$("#type").change(function () {
switch($(this).val()) {
case 'item1':
$("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
break;
case 'item2':
$("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
break;
case 'item3':
$("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
break;
default:
$("#size").html("<option value=''>--select one--</option>");
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>回答by Vadim
Your if statement is setting the value. You want to compare it by doing this
您的 if 语句正在设置该值。你想通过这样做来比较它
if ($("#type").val() == "item1") {
...
}
daLizard is right though. You want an event handler. document.ready runs only once, when the page DOM is ready to be used.
daLizard 是对的。你想要一个事件处理程序。document.ready 只运行一次，当页面 DOM 准备好使用时。
回答by daLizard
I don't quote understand what you are trying to achieve, but you need an event listener. Something like:
我不引用了解您要实现的目标，但是您需要一个事件侦听器。就像是：
$('#type').change(function() {
alert('Value changed to ' + $(this).attr('value'));
});
This will give you the value of the selected option tag.
这将为您提供所选选项标签的值。
