html - how to change dropdowns values based on a selection of another dropdown using jquery

Question

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.

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>

Answer 1

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/