45243


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

[code]

    <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>
    
[/code]

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


CC BY-SA 4.0
2018-07-02T13:03:23.753
45238
2018-07-02T19:59:15.450
28019
question
javascript html
ドロップダウンリストで特定の選択肢を選択不可にしたい


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

[code]

         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;
             }
           })
         }
[/code]

[code]

        <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>
[/code]


CC BY-SA 4.0
2018-07-02T13:59:26.383
45242
2018-07-02T13:59:26.383
45238
answer


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

[code]

    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;
      });
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2018-07-02T18:17:47.287
45243
2018-07-02T19:59:15.450
2018-07-02T19:59:15.450
29151
29151
45238
answer