1

下記のようにドロップダウンを設定しているのですが、idが"s1"の方で「あ」が選択されている時に、idが"s2"の方で「C」と「D」の選択肢を選択不可にしたいです。

<select id="s1">
    <option value="1">あ</option>
    <option value="2">い</option>
</select>

<select id="s2">
    <option value="3">A</option>
    <option value="4">B</option>
    <option value="5">C</option>
    <option value="6">D</option>
</select>

javascriptでやろうかなと思っているのですが、方法がわかりません。
よろしくお願いいたします。

2 件の回答 2

1

いくつかのクラスを無効にするオプションに入れる:

document.addEventListener('DOMContentLoaded', function() {
  let event = new Event('change');
  s1.dispatchEvent(event);
});

s1.addEventListener("change", function() {
  let list = Array.from(document.querySelectorAll('#s2 option.toggle'));
  let optionStatus = false;
  if (this.value == "1") {
    optionStatus = true;
  }
  list.forEach(function(option) {
    option.disabled = optionStatus;
  });
});
<select id="s1">
  <option value="1">あ</option>
  <option value="2">い</option>
</select>
<select id="s2">
  <option value="3">A</option>
  <option value="4">B</option>
  <option class="toggle" value="5">C</option>
  <option class="toggle" value="6">D</option>
</select>

1

こんなんどうでしょうか?
(javascript dom操作 select option disabledなどのキーワードでググると、良いやり方がいろいろでてくると思います。DOM操作の仕組みの基本を学べば、いろいろ応用が効くと思います。)

     var s2OptionsDisabledRules = {
       "1": ["5", "6"],
       "2": []
     }
     document.addEventListener('DOMContentLoaded', function() {
       var s1 = document.getElementById('s1');
       setupS2(s1.value);

       s1.onchange = function onchange(event) {
         setupS2(event.target.value);
       };
     });

     function setupS2(s1) {
       var rule = s2OptionsDisabledRules[s1]
       var options = document.querySelectorAll('select#s2 > option');
       options.forEach(function(elm) {
         if (!!rule && rule.includes(elm.value)) {
           elm.disabled = true;
           elm.selected = false;
         } else {
           elm.disabled = false;
         }
       })
     }
    <select id="s1">
      <option value="1">あ</option>
      <option value="2">い</option>
    </select>
    <br/>
    <select id="s2">
      <option value="3">A</option>
      <option value="4">B</option>
      <option value="5">C</option>
      <option value="6">D</option>
    </select>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。