選択要素でabcが選択された場合2番目の選択要素でabcグループ項目が発生する方法

Question

2つの選択要素があります。最初の選択要素でabc値が選択された場合、グループ項目は2番目の選択要素で発生します。

私はこれをしたいと思います。これを作る方法？

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

Answer 1

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>