2017-09-14 78 views
-4

有兩個select元素。如果在第一個select元素中選擇了abc值,則abc組項目在第二個select元素中發生。如果在select元素中選擇了abc如何在第二個select元素中發生abc組項目

我想這樣做。這如何製作?

<select id="bolum" onChange="giveSelection(this.value)"> 
    <option value="bp">bp</option> 
    <option value="mv">mv</option> 
</select> 
<select id="ders"> 
    <option data-option="bp">gorsel</option> 
    <option data-option="bp">internet</option> 
    <option data-option="mv">vergi</option> 
    <option data-option="mv">maths</option> 
</select> 


var bolum = document.querySelector('#bolum'); 
var ders = document.querySelector('#ders'); 
var options2 = ders.querySelectorAll('option'); 

     function giveSelection(selValue) { 

      ders.innerHTML=''; 

      for(var i = 0; i < options2.length; i++) 
       { 
       if(options2[i].dataset.option === selValue) 
       { 
        ders.appendChild(options2[i]); 
       } 
       } 
     } 

giveSelection(bolum.value); 
+0

看看這個https://stackoverflow.com/help/how-to-ask是因爲我們幫不了你。請分享我們已經嘗試過的代碼。 – Steven

+0

請給我們展示一些代碼,我們不是你的工作者@OnurCevik – turmuka

+1

「組件發生」甚至是什麼意思?明確問題並提供一個你卡在哪裏的例子。 – David

回答

0

像這樣使用jQuery?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<select id = 'first'> 
    <option disabled selected>--select</option> 
    <option>ABC</option> 
    <option>123</option> 
</select> 
<select id = 'second' style = 'display:none'> 
</select> 
<script> 
    var optionsAbc = '<option>A</option><option>B</option>'; 
    var options123 = '<option>1</option><option>2</option>'; 
    $("#first").change(function() { 
     $("#second").show(); 
     var value = $(this).val(); 
     if(value == 'ABC') { 
      $("#second").html(optionsAbc); 
     } else if (value == '123') { 
      $("#second").html(options123); 
     } 
    }); 
</script> 
相關問題