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

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

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

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

谢谢:)这是我的代码：

 Standard/Annealed Glass Width Tempered Glass Width 
 Glass Width for Standard:
  19 20 21  Glass Width for Tempered:
  6 7 8 9  

Answer 1

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

 $('#typeOfGlass').on('change', function(){ $('#glassWidth').html(''); if($('#typeOfGlass').val()==15){ $('#glassWidth').append('19'); $('#glassWidth').append('20'); $('#glassWidth').append('21'); }else{ $('#glassWidth').append('6'); $('#glassWidth').append('7'); $('#glassWidth').append('8'); $('#glassWidth').append('9'); } }); 

这是一个工作示例： https ： //jsfiddle.net/6hmpa1ax/

Answer 2

作为替代方案，如果您不想动态更改DOM，则可以隐藏/显示预制标记。 DEMO

HTML

  Please select a glass type Standard/Annealed Glass Width Tempered Glass Width  
 
 Glass Width for Standard:  19 20 21  
 
 Glass Width for Tempered:  6 7 8 9   

jQuery的

 $('#typeOfGlass').on('change', function(){ if( $(this).val() == 15 ){ $('.tempered').hide(); $('.standard').show(); } else if( $(this).val() == 20 ){ $('.standard').hide(); $('.tempered').show(); } }); 

CSS

 .standard, .tempered { display:none; } 

Answer 3

看看这段代码

   select Standard/Annealed Glass Width Tempered Glass Width 

  19 20 21   6 7 8