jquery - 如何使用 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/