如何使用 jquery 根据选择的另一个下拉列表更改下拉列表值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30671620/
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 dropdowns values based on a selection of another dropdown using jquery
提问by ilovedoingwebsites
I have my first dropdown with 2 selections: Standard Glass and Tempered glass. I have another dropdown where the user can select the width of the glass.
我的第一个下拉菜单有 2 个选项：标准玻璃和钢化玻璃。我还有另一个下拉菜单，用户可以在其中选择玻璃的宽度。
My problem: the second dropdown values need to change depending on what kind of glass was selected in the first dropdown.
我的问题：第二个下拉值需要根据在第一个下拉列表中选择的玻璃类型而改变。
Look at my code, I have the 2 dropdowns with an id of glassWidthStandard and the other dropdown glassWidthTempered.
看看我的代码，我有 2 个下拉菜单，id 为 glassWidthStandard，另一个下拉菜单为 glassWidthTempered。
Thank you :) here is my code:
谢谢:) 这是我的代码：
<select id="typeOfGlass">
<option value="15">Standard/Annealed Glass Width</option>
<option value="20">Tempered Glass Width</option>
</select><br>
Glass Width for Standard:<br>
<select id="glassWidthStandard">
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
</select>
Glass Width for Tempered:<br>
<select id="glassWidthTempered">
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
回答by depperm
I would suggest having just two selects, then changing the 2nd select based on what is selected in the first.
我建议只进行两次选择，然后根据第一次选择的内容更改第二次选择。
$('#typeOfGlass').on('change', function(){
$('#glassWidth').html('');
if($('#typeOfGlass').val()==15){
$('#glassWidth').append('<option value="19">19</option>');
$('#glassWidth').append('<option value="20">20</option>');
$('#glassWidth').append('<option value="21">21</option>');
}else{
$('#glassWidth').append('<option value="6">6</option>');
$('#glassWidth').append('<option value="7">7</option>');
$('#glassWidth').append('<option value="8">8</option>');
$('#glassWidth').append('<option value="9">9</option>');
}
});
Here is a working example: https://jsfiddle.net/6hmpa1ax/
这是一个工作示例：https: //jsfiddle.net/6hmpa1ax/
回答by wrxsti
As an alternative, if you don't want to dynamically change the DOM you can hide/show the premade markup. DEMO
作为替代方案，如果您不想动态更改 DOM，您可以隐藏/显示预制标记。演示
HTML
HTML
<select id="typeOfGlass">
<option selected disabled>Please select a glass type</option>
<option value="15">Standard/Annealed Glass Width</option>
<option value="20">Tempered Glass Width</option>
</select>
<br />
<div class="standard">
<label>Glass Width for Standard:</label>
<select id="glassWidthStandard">
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
</select>
</div>
<div class="tempered">
<label>Glass Width for Tempered:</label>
<select id="glassWidthTempered">
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
jQuery
jQuery
$('#typeOfGlass').on('change', function(){
if( $(this).val() == 15 ){
$('.tempered').hide();
$('.standard').show();
} else if( $(this).val() == 20 ){
$('.standard').hide();
$('.tempered').show();
}
});
CSS
CSS
.standard, .tempered {
display:none;
}
回答by shreyansh
have a look at this code
看看这个代码
<body onLoad="fun('')">
<select id="typeOfGlass" onchange="fun(this.value)" >
<option value=''>select</option>
<option value="15">Standard/Annealed Glass Width</option>
<option value="20">Tempered Glass Width</option>
</select><br/><br/>
<select id="glassWidthStandard">
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
</select>
<select id="glassWidthTempered">
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</body>
<script>
function fun(val)
{
if(val==15)
{
$('#glassWidthTempered').hide();
$('#glassWidthStandard').show();
}
else if(val==20)
{
$('#glassWidthStandard').hide();
$('#glassWidthTempered').show();
}
else if(val=='')
{
$('#glassWidthStandard').hide();
$('#glassWidthTempered').hide();
}
}
</script>
