2つのセレクトボックスを連動させ、選択項目の表示・非表示を行いたい（親子関係なし）

Question

前提・実現したいこと

jqueryで2つのセレクトボックスを連動させ、選択項目の表示・非表示を行いたいと思っています。

具体的には、

選択肢１（A、B）
選択肢２（a、b、c、d）

選択肢１でAを選択すると、選択肢２では全て選択可能。
選択肢１でBを選択すると、選択肢２ではa、b、cのみ選択可能。
逆に、選択肢２でdを選択すると、選択肢１ではAのみ選択可能になる。

といったものにしたいのですが、
いくら調べても、data-valを使い選択肢の親子関係を作るものしか対処方法が見つからず、
どう実装すればいいか、悩んでおります。

何か方法を知っている方、アイデアのある方、
コメントいただけますと幸いです。

よろしくお願いいたします。

Comments

[yambejp]

それぞれ未選択となるデフォルトがあるのでしょうか？

[mayeno26]

未選択のデフォルトはなしにしたいと考えております。未選択でのエラー表示をさせたくなかったので。

[yambejp]

ではデフォルトは選択肢1はA、選択肢2はaということですね？

[mayeno26]

はい！その通りです。

Answer 1

ざっくりとこんな感じです
選択肢1の初期値と選択肢2の初期値が競合しないように注意して下さい

$(function(){
  $('#s1').on('change',function(){
    if($(this).val()=="A"){
      $('#s2').find('option').prop('disabled',false);
    }else if($(this).val()=="B"){
      $('#s2').find('option').filter(function(){
        var v=$(this).val();
        return ["a","b","c"].filter(function(x){
          return x==v;
        }).length==0;
      }).prop('disabled',true);
    }
  });
  $('#s2').on('change',function(){
    if($(this).val()!="d"){
      $('#s1').find('option').prop('disabled',false);
    }else{
      $('#s1').find('option').filter(function(){
        var v=$(this).val();
        return ["A"].filter(function(x){
          return x==v;
        }).length==0;
      }).prop('disabled',true);
    }
  });
});

選択肢１<select id="s1">
<option value="A">A</option>
<option value="B">B</option>
</select>
<hr>
選択肢２<select id="s2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>

Comments

[yambejp]

選択肢2のchange時の処理はもう少し省略できますが
一応A以外のものも選べるようにするためあえて配列で処理してあります

[mayeno26]

解決しました。
素早いご回答ありがとうございます！大変助かりました！

Answer 2

ハードコーディングすればできないこともありませんが、変更に弱くなります。

$('#S1').on('change', function(event) {
  if (this.value === 'A') {
    $('#S2 option').prop('disabled', false);
  } else {
    $('#S2 option').each(function(index, element) {
      element.disabled = !(element.value === 'a' || element.value === 'b' || element.value === 'c');
    });
  }
});

$('#S2').on('change', function(event) {
  if (this.value !== 'd') {
    $('#S1 option').prop('disabled', false);
  } else {
    $('#S1 option').each(function(index, element) {
      element.disabled = element.value !== 'A';
    });
  }
});

Comments

[mayeno26]

ご回答ありがとうございます。
こちらを見て、さらに理解が進みました。ありがとうございます！