2017-07-26 142 views
-1

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

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

回答

3

使用此代码

<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> 
+0

谢谢你......太多了.... –

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> 

它活像ks完美。

相关问题