ダイナミックなセレクターの設定

フォームでセレクターの中身を設定する固定式では無く、ダイナミックに中身を入れ替える方法を覚えておきましょう。

最初のセレクターが選ばれると、2番目のセレクターの中身を入れ替えます。

<select name="genre" id="genre" onchange="createMenu(this.value)">
    <option disabled selected>タイプを選択してください</option>
    <option value="Alkane">アルカン</option>
    <option value="Alkene">アルケン</option>
    <option value="Alkyne">アルキン</option>
  </select><br>
  <select name="compList" id="compList" disabled>
    <option disabled selected>化合物を選択してください</option>
  </select>

最初のセレクターの値を変更すると、createMenu関数へ飛びます。
2番目のセレクターはdisabledが指定さfれているので、選択する事ができません。

const compMenu = 
{
    "Alkane": ["ヘキサン", "ヘプタン", "オクタン", "ノナン"],
    "Alkene": ["エチレン", "プロピレン", "ブチレン"],
    "Alkyne": ["アセチレン", "プロピン", "ブチン"]
};

セレクターに設定するアイテムはこのように準備しておきます。

let option = document.createElement('option');
  option.innerHTML = '化合物を選択してください';
  option.defaultSelected = true;
  option.disabled = true;
  compList.appendChild(option);

後は、optionオブジェクトを作成して、innerHTMLを設定した後、appendChildとセレクターに追加していきます。

<SCRIPT language="JavaScript"><!--

const compMenu = 
{
    "Alkane": ["ヘキサン", "ヘプタン", "オクタン", "ノナン"],
    "Alkene": ["エチレン", "プロピレン", "ブチレン"],
    "Alkyne": ["アセチレン", "プロピン", "ブチン"]
};


function createMenu(selectGenre){
  
  let compList = document.getElementById('compList');
  compList.disabled = false;
  compList.innerHTML = '';
  let option = document.createElement('option');
  option.innerHTML = '化合物を選択してください';
  option.defaultSelected = true;
  option.disabled = true;
  compList.appendChild(option);  
  
  compMenu[selectGenre].forEach( menu => {
    let option = document.createElement('option');
    option.innerHTML = menu;
    compList.appendChild(option);  
  });    
} 

--></SCRIPT>

化学系プログラミング > Javascript化学系演習 > ダイナミックなセレクターの設定