如何根据使用jquery选择另一个下拉列表来更改下拉列表值

Question

我有第一个下拉菜单,有2个选项:标准玻璃和钢化玻璃.我有另一个下拉列表,用户可以选择玻璃的宽度.

我的问题:第二个下拉值需要根据第一个下拉列表中选择的玻璃类型而改变.

看看我的代码,我有2个下拉列表,其id为glassWidthStandard,另一个下拉列表为glassWidthTempered.

谢谢:)这是我的代码:

 <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>

Answer 1

我建议只选择两个,然后根据第一个选择更改第二个选择.

$('#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/