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/

Answer 2

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

<强> HTML

<select id="typeOfGlass">
    <option selected disabled>Please select a glass type</option>
    <option value="15">Standard/Annealed Glass Width</option>
    <option value="20">Tempered Glass Width</option>
</select>
<br />

<div class="standard">
    <label>Glass Width for Standard:</label>
    <select id="glassWidthStandard">
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
    </select>
</div>
<div class="tempered">
    <label>Glass Width for Tempered:</label>
    <select id="glassWidthTempered">
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>
</div>

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

看一下这段代码

<body  onLoad="fun('')">

<select id="typeOfGlass" onchange="fun(this.value)" >
 <option value=''>select</option>
  <option value="15">Standard/Annealed Glass Width</option>
    <option value="20">Tempered Glass Width</option>
</select><br/><br/>


    <select id="glassWidthStandard">
        <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
    </select>
    <select id="glassWidthTempered">
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select>


</body>
<script>
 function fun(val)
 {
  if(val==15)
  {
    $('#glassWidthTempered').hide();
    $('#glassWidthStandard').show();
  }
  else if(val==20)
  {
    $('#glassWidthStandard').hide();
    $('#glassWidthTempered').show();
  }
  else if(val=='')
  {
    $('#glassWidthStandard').hide();
    $('#glassWidthTempered').hide();
  }
 }
</script>

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

3 个答案: