如何基于使用jquery选择另一个下拉列表来更改下拉列表值 [英] how to change dropdowns values based on a selection of another dropdown using jquery
问题描述
我有我的第一个下拉菜单,有两种选择:标准玻璃和钢化玻璃。
我有另一个下拉列表,用户可以选择玻璃的宽度。
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.
我的问题:第二个下拉值需要根据玻璃的类型是在第一个下拉列表中选择的。
My problem: the second dropdown values need to change depending on what kind of glass was selected in the first dropdown.
查看我的代码,我有2个下拉列表,其中包含glassWidthStandard标识和另一个下拉列表glassWidthTempered。
Look at my code, I have the 2 dropdowns with an id of glassWidthStandard and the other dropdown 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>
推荐答案
我建议只做两个选择,然后更改第二选择基于在第一选择什么。
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>');
}
});
下面是一个工作示例: https://jsfiddle.net/6hmpa1ax/
Here is a working example: https://jsfiddle.net/6hmpa1ax/
这篇关于如何基于使用jquery选择另一个下拉列表来更改下拉列表值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!