Javascriptの選択要素が表示されます。

Question

2つの選択ボックスがあります。別のボックスのテキストに基づいて、1つのボックスにいくつかのオプションを表示/非表示するにはどうすればよいですか？

たとえば、私は仕事と年の2つのボックスを持っています。私がジョブボックスで学生のオプションを選択した場合、年のボックスは1年と2年のオプションのみを表示し、オプションの講師をジョブボックスで選択すると、年のボックスには2年間と5年間のオプションが表示されます。

Answer 1

var sel1 = document.querySelector('#sel1'); 
 
    var sel2 = document.querySelector('#sel2'); 
 
    var options2 = sel2.querySelectorAll('option'); 
 

 
    function giveSelection(selValue) { 
 
     sel2.innerHTML = ''; 
 
     for(var i = 0; i < options2.length; i++) { 
 
     if(options2[i].dataset.option === selValue) { 
 
      sel2.appendChild(options2[i]); 
 
     } 
 
     } 
 
    } 
 

 
    giveSelection(sel1.value);

<select id="sel1" onchange="giveSelection(this.value)"> 
 
     <option value="s">student</option> 
 
     <option value="l">lecturer</option> 
 
    </select> 
 
    <select id="sel2"> 
 
     <option data-option="s">1 year</option> 
 
     <option data-option="s">2 years</option> 
 
     <option data-option="l">2 years</option> 
 
     <option data-option="l">5 years</option> 
 
    </select>