JavaScriptの学習 セレクトボックスのメニューをラジオボタンで制御

ラジオボタンの選択に合わせてセレクトボックスのメニュー表示を変更したい

ラジオボタンの選択でセレクトボックスのメニュー表示をオン/オフ制御する方法

動作確認

ラジオボタン Type-1 Type-2

セレクトメニュー ラジオボタンで制御 A B

HTMLソースコード

<p>
  ラジオボタン
  <input type="radio" name="RADIO_ONOFF" value="1" onclick="SelBoxOnOff()">Type-1
  <input type="radio" name="RADIO_ONOFF" value="2" onclick="SelBoxOnOff()" checked>Type-2
</p>

<p>
  セレクトメニュー
  <select id="SELECT_ONOFF" name="SELECT_ONOFF">
    <option value="1">ラジオボタンで制御</option>
    <option value="VA">A</option>
    <option value="VB">B</option>
  </select>
</p>

JavaScriptソースコード

// セレクトボックス メニュー 表示/非表示
function SelBoxOnOff() {
  // ラジオボタンの情報を取得
  const MyButton = document.getElementsByName('RADIO_ONOFF');

  if (MyButton[0].checked) {
    // セレクトボックスのメニュー表示をオン
    document.getElementById('SELECT_ONOFF').style.display = "none";
  } else {
    // セレクトボックスのメニュー表示をオフ
    document.getElementById('SELECT_ONOFF').style.display = "";
  }
}

// 全ページデータ読み込み完了後にイベントハンドラを登録
window.addEventListener('load', SelBoxOnOff());

ラジオボタンの選択でセレクトボックスのメニュー表示内容を変更する方法

動作確認

ラジオボタン Type-1 Type-2

セレクトメニュー

HTMLソースコード

<p>
  ラジオボタン
  <input type="radio" name="RADIO_CONT" value="1" onclick="SelBoxMenuChange()" checked>Type-1
  <input type="radio" name="RADIO_CONT" value="2" onclick="SelBoxMenuChange()">Type-2
</p>

<p>
  セレクトメニュー
  <select id="SELECT_CONT" name="SELECT_CONT">
  </select>
</p>

JavaScriptソースコード

// セレクトボックス メニュー リスト変更
function SelBoxMenuChange() {
  // メニューリスト1
  const MyMenu1 = [
    ['1', 'ラジオボタンで制御1'],
    ['VA', 'A'],
    ['VB', 'B']
  ];

  // メニューリスト2
  const MyMenu2 = [
    ['2', 'ラジオボタンで制御2'],
    ['VX', 'X'],
    ['VY', 'Y']
  ];

  // ラジオボタンの情報を取得
  const MyButton = document.getElementsByName('RADIO_CONT');

  // セレクトボックスの情報を取得
  let MySelBox = document.getElementById('SELECT_CONT');

  // メニューリスト設定: ラジオボタン1がチェックされた場合
  let TmpMenu = MyMenu1;
  // メニューリスト設定: ラジオボタン2がチェックされた場合
  if (MyButton[1].checked) {TmpMenu = MyMenu2;}

  // 古いメニューリストを削除
  while (MySelBox.length) {
    MySelBox.remove(0);
  }

  // メニューリストを作成
  TmpMenu.forEach((element) => {
    // OPTIONタグを生成
    let TmpOpt = document.createElement('option');
    TmpOpt.value = element[0];
    TmpOpt.text = element[1];

    // セレクトボックスに新しいメニューリストを追加
    MySelBox.appendChild(TmpOpt);
  });
}

// 全ページデータ読み込み完了後にイベントハンドラを登録
window.addEventListener('load', SelBoxMenuChange());

ハマりました

  // メニューリストを作成
  TmpMenu.forEach((element) => {
    // セレクトボックスに新しいメニューリストを追加
    MySelBox.options[MySelBox.options.length] = new Option(element[1], element[0]);
  });

  // OPTIONタグを生成
  let TmpOpt = document.createElement('option');

  // メニューリストを作成
  TmpMenu.forEach((element) => {
    TmpOpt.value = element[0];
    TmpOpt.text = element[1];

    // セレクトボックスに新しいメニューリストを追加
    MySelBox.appendChild(TmpOpt);
  });