Question

我的代码看起来像。我创建了两个下拉菜单，我必须根据第一个值拖动第二个下拉列表的第二个值。

<div>
        <label for="program">Program</label>
        <select id="trigger" name="program" class="x-large">



            <option value="1">as</option>
            <option value="2">gs</option>


                 </select>
    </div>
<div>
        <label for="issuer">Award Issuer</label>
        <select id="issuer" name="issuer">
            <option value="1" class="issuer_1">s</option>


            <option value="1" class="issuer_1">st</option>
        <option value="2" class="issuer_2">skk</option>


        </select>
    </div>

Answer 1

使用此代码

    <script>
var category = document.getElementById('category');
document.getElementById('elements').onchange = function() {
  var optionSelected = this.options[this.selectedIndex];
  if (optionSelected.textContent != '-') {
    if (optionSelected.dataset.val === 'm2') {
      category.value = 'PM2160A';
    }
    else if (optionSelected.dataset.val === 'm3')  {
    category.value='MFM101';
}
    else if (optionSelected.dataset.val === 'm4')  {
    category.value='ABC';
}
    else {
      category.value = 'PM130';
    }
  } else {
    category.value = '';
  }
}
</script>

HTML代码

<!-------first drop down----------->
<select name="make" id="elements">
  <option value="">-</option>
  <option value="Stace" >Stace</option>
  <option data-val='m2' value="Minibus" >Minibus</option>
  <option data-val='m3' value="Pyrotechnic" >Tyro tech</option>
   <option data-val='m4' value="Schneider" >Schneider</option>
  <!-- veg -->
</select>

<!---------second drop down---------->
<select name="model" id="category">
  <option value="">-</option>
  <option value="PM130" >PM130</option>
  <option value="PM2160A" >PM2160A</option>
  <option value="MFM101">MFM101</option>
   <option value="ABC" >ABC</option>
</select>

Answer 2

<!-------first dropdown----------->
<select name="make" id="elements">
  <option value="">-</option>
  <option value="Satec" >Satec</option>
  <option data-val='m2' value="Masibus" >Masibus</option>
  <option data-val='m3' value="Pyrotech" >Pyrotech</option>
   <option data-val='m4' value="Schneider" >Schneider</option>
  <!-- veg -->
</select>

<!---------second dropdown---------->
<select name="model" id="category">
  <option value="">-</option>
  <option value="PM130" >PM130</option>
  <option value="PM2160A" >PM2160A</option>
  <option value="MFM101" >MFM101</option>
   <option value="ABC" >ABC</option>
</select>

添加JS脚本

<script>
var category = document.getElementById('category');
document.getElementById('elements').onchange = function() {
  var optionSelected = this.options[this.selectedIndex];
  if (optionSelected.textContent != '-') {
    if (optionSelected.dataset.val === 'm2') {
      category.value = 'PM2160A';
    }
    else if (optionSelected.dataset.val === 'm3')  {
    category.value='MFM101';
}

    else if (optionSelected.dataset.val === 'm4')  {
    category.value='ABC';
}
    else {
      category.value = 'PM130';
    }
  } else {
    category.value = '';
  }
}
</script>

效果很好。

如何根据第一个传播第二个下拉菜单？

2 个答案: