addEventListener内でif文は使用できないでしょうか。

Question

前提・実現したいこと

A,B,C３つのプルダウンメニューをグループにして、１ページに２グループ繰り返します。
A,B,Cはすでに選択肢が決まっていて、Aで選択したものに対してB,Cで選択できる要素が絞り込まれます。

AのプルダウンメニューにAddEventListnerをつけてAをselectedで判定し、B,Cで使えないoptionにdisabledを付け、2回for文で繰り返そうとしています。ところが、addEventListner内でAのselectedが１の場合、２の場合、とif文を書くと、最初の文だけしか効かず、２つ目以降のelse ifが反応してくれません。１つ目を選択した後は、B,Cが固定されてしまいます。２つ目を選択してもB,Cは１つ目の条件になってしまいます。

該当のソースコード

const selItem = document.querySelectorAll("select");
for (let i = 1; i < 6; i += 3) {
  selItem[i].setAttribute("disabled", true);
}
for (let j = 2; j < 6; j += 3) {
  selItem[j].setAttribute("disabled", true);
}

for (let k = 0; k < 6; k += 3) {
  selItem[k].addEventListener("click", function(evt) {
    //同じグループのAが選択されたらB,Cのdisabledを外す
    selItem[k + 1].disabled = false;
    selItem[k + 2].disabled = false;
    //Aが変更された場合はB,Cの選択可能オプションが変わるのでB,Cは選択を初期化する
    selItem[k + 1].selectedIndex = 0;
    selItem[k + 2].selectedIndex = 0;
    //Aのoption１つ目
    if (selItem[k].value == "1") {
      //Bの制限。Aのvalueが１の場合Bは1,2番目のみ選択可能
      selItem[k + 1].options[3].setAttribute("disabled", true);
      selItem[k + 1].options[4].setAttribute("disabled", true);
      //Cの制限。Aのvalueが１の場合Cは1から6番目のみ選択可能
      for (let c = 7; c < 12; c++) {
        selItem[k + 2].options[c].setAttribute("disabled", true);
      }
    }

    //Aのoption２つ目
    else if (selItem[k].value == "2") {
      //Bの制限。Aのvalueが2の場合Bは1,2,3番目のみ選択可能
      　selItem[k + 1].options[4].setAttribute("disabled",true);
      //Cの制限。Aのvalueが2の場合Cは4から11番目のみ選択可能
      for (let c = 1; c < 12; c++) {
        selItem[k + 2].options[c].setAttribute("disabled", true);
      }
      evt.stopPropagation(); // イベントの伝播を止める
    }
  });
}

//A-1
<select>
    <option value="" selected="selected">選択 ...</option>
    <option value="1">11日</option>
    <option value="2">12日</option>
</select>
//B-1
<select>
    <option value="" selected="selected">選択 ...</option>
    <option value="1">田中</option>
    <option value="2">佐藤</option>
    <option value="3">藤井</option>
    <option value="4">伊藤</option>
</select>
//C-1
<select>
    <option value="" selected="selected">選択 ...</option>
    <option value="1">9時</option>
    <option value="2">10時</option>
    <option value="3">11時</option>
    <option value="4">12時</option>
    <option value="5">13時</option>
    <option value="6">14時</option>
    <option value="7">15時</option>
    <option value="8">16時</option>
    <option value="9">9時〜12時の間</option>
    <option value="10">13時〜15時の間</option>
    <option value="11">13時〜15時の間</option>
</select>
//A-2
<select>
    <option value="" selected="selected">選択 ...</option>
    <option value="1">理系</option>
    <option value="2">文系</option>
</select>
//B-2
<select>
    <option value="" selected="selected">選択 ...</option>
	<option value="1">田中</option>
	<option value="2">佐藤</option>
    <option value="3">藤井</option>
	<option value="4">伊藤</option>
</select>
//C-2
<select>
    <option value="" selected="selected">選択 ...</option>
    <option value="1">9時</option>
    <option value="2">10時</option>
    <option value="3">11時</option>
    <option value="4">12時</option>
    <option value="5">13時</option>
    <option value="6">14時</option>
    <option value="7">15時</option>
    <option value="8">16時</option>
    <option value="9">9時〜12時の間</option>
    <option value="10">13時〜15時の間</option>
    <option value="11">13時〜15時の間</option>
</select>

試したこと

独学者で行き詰まってしまいました。ご教示いただけると幸いです。よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

Comments

[m.ts10806]

インデントのおかしさは直してください。
このかっこ{} の対応が全然見えない中でなんもないです。
タイトルだけに答えると「No」

[Jon_do]

htmlを追記してください。

[TakuTakahashi]

早速ご回答いただきありがとうございます。当初１０回繰り返す、としていましたがHTML追加に伴い２回に簡略化しました。B,Cで指定するoptionも変更しました。

[TakuTakahashi]

m.ts10806さん、Jon_doさん、この度は稚拙な質問に素早くご回答いただきまことにありがとうございました。お陰様で解決いたしました。またご縁がありましたら何卒よろしくお願いいたします。

Answer 1

おそらく以下の部分が原因です。

// 誤
// if(selItem[k].value="1")

//正
if(selItem[k].value=="1")

selItem[k].value="1"は"1"が代入され常にtruthyなので、必ずそのifブロックが実行されてしまいます。

追加の質問に対する回答

1. optionにdisabledを指定する処理は記述してあるが、disabledを取り除く処理が無い

Aで1を選択したときには、Bの3と4がdisabledになります。
その後、Aで2を選択したときにはBの4をdisabledにしていますが、3のdisabledは解除されていないので結果的に1と同じ状況になっています。

2. Cの制限のfor文の範囲が間違っている

「Aのvalueが2の場合Cは4から11番目のみ選択可能」のはずが、「1~11を選択不可」にしています。

const selItem = document.querySelectorAll("select");

for (let i = 1; i < 6; i += 3) {
  selItem[i].setAttribute("disabled", true);
}
for (let j = 2; j < 6; j += 3) {
  selItem[j].setAttribute("disabled", true);
}

for (let k = 0; k < 6; k += 3) {
  selItem[k].addEventListener("click", function(evt) {
    //同じグループのAが選択されたらB,Cのdisabledを外す
    selItem[k + 1].disabled = false;
    selItem[k + 2].disabled = false;
    //Aが変更された場合はB,Cの選択可能オプションが変わるのでB,Cは選択を初期化する
    selItem[k + 1].selectedIndex = 0;
    selItem[k + 2].selectedIndex = 0;

    /***** 追加:disabledの初期化 *****/
    const selB = selItem[k + 1];
    const selC = selItem[k + 2];
    for (let item of selB.options) item.removeAttribute("disabled");
    for (let item of selC.options) item.removeAttribute("disabled");
    /***** 追加ココまで *****/

    //Aのoption１つ目
    if (selItem[k].value == "1") {
      //Bの制限。Aのvalueが１の場合Bは1,2番目のみ選択可能
      selItem[k + 1].options[3].setAttribute("disabled", true);
      selItem[k + 1].options[4].setAttribute("disabled", true);
      //Cの制限。Aのvalueが１の場合Cは1から6番目のみ選択可能
      for (let c = 7; c < 12; c++) {
        selItem[k + 2].options[c].setAttribute("disabled", true);
      }
    }

    //Aのoption２つ目
    else if (selItem[k].value == "2") {

      //Bの制限。Aのvalueが2の場合Bは1,2,3番目のみ選択可能
      selItem[k + 1].options[4].setAttribute("disabled", true);
      //Cの制限。Aのvalueが2の場合Cは4から11番目のみ選択可能
      
      /***** 修正:範囲 *****/
      for (let c = 1; c < 5; c++) {
        selItem[k + 2].options[c].setAttribute("disabled", true);
      }
      evt.stopPropagation(); // イベントの伝播を止める
    }
  });
}

Comments

[k_a]

m.ts10806さんの言う通り、インデントは整えてください。
VSCodeなどのエディタなら拡張機能ですぐに直せます。
https://jsfiddle.net/ などのオンラインIDE等を使用しても良いと思います。

また、Jon_doさんのhtmlを追記してくださいというもの尤もです。
回答者が動作を確認しようとしてもhtmlが無いとすぐに確認できません。

[TakuTakahashi]

==のご指摘ありがとうございます。htmlの掲載に伴い簡略化したこともあってか、Aに対するB,Cが意図した動きにならなくなりました。グループに対応していないのと、やはりelse ifが効きません。

[k_a]

回答を追加しました。

これは今回の質問に直接関連はしないのでコメントに書きますが、2点修正したほうが良さそうなことがあります。

1. selItem[k + 1]の用な記述は可能な限り減らす

追加回答では`const selB = selItem[k + 1];`の用に変数を定義しました。
selItem[k + 1]やselItem[k + 2]が色んな場所で出てくると後々自分でもこれが何を示しているのかわからなくなります（多分）。
できるだけわかりやすい変数に格納して、配列での指定はなくしましょう(selBは微妙な命名かもしれません)。

2. イベントハンドラは`click`より`change`の方が良い

clickイベントはselect選択時とoption選択時の2回呼ばれます。
また、選択に変更がなくても呼ばれます。
changeイベントはoption選択時、かつ選択が変更された場合のみ呼ばれます。

[TakuTakahashi]

遅くまでお付き合いいただきまことにありがとうございました。おかげさまで意図した通りに動きました
！あまりに手に負えず組織内のアンケートのためExcelファイルの集計にしようかと考え直していたところご回答を目にしました。厚く御礼申し上げます。またご縁がありましたらどうぞよろしくお願いいたします。
```javascript
const selItem = document.querySelectorAll("select");
for (let i = 1; i < 6; i += 3) {
selItem[i].setAttribute("disabled", true);
}
for (let j = 2; j < 6; j += 3) {
selItem[j].setAttribute("disabled", true);
}

for (let k = 0; k < 6; k += 3) {
selA.addEventListener("change", function(evt) {
　const selA = selItem[k];
const selB = selItem[k + 1];
const selC = selItem[k + 2];
//同じグループのAが選択されたらB,Cのdisabledを外す
selB.disabled = false;
selC.disabled = false;
//他で制限された状態を解放する
for (let item of selB.options) item.removeAttribute("disabled");
for (let item of selC.options) item.removeAttribute("disabled");
//Aが変更された場合はB,Cの選択可能オプションが変わるのでB,Cは選択を初期化する
selB.selectedIndex = 0;
selC.selectedIndex = 0;
//Aのoption１つ目
if (selItem[k].value == "1") {
//Bの制限。Aのvalueが１の場合Bは1,2番目のみ選択可能
selB.options[3].setAttribute("disabled", true);
selC.options[4].setAttribute("disabled", true);
//Cの制限。Aのvalueが１の場合Cは1から6番目のみ選択可能
for (let c = 7; c < 12; c++) {
selC.options[c].setAttribute("disabled", true);
}
}

//Aのoption２つ目
else if (selA.value == "2") {
//Bの制限。Aのvalueが2の場合Bは1,2,3番目のみ選択可能
　selB.options[4].setAttribute("disabled",true);
//Cの制限。Aのvalueが2の場合Cは4から11番目のみ選択可能
for (let c = 1; c < 5; c++) {
selC.options[c].setAttribute("disabled", true);
}
evt.stopPropagation(); // イベントの伝播を止める
}
});
}
```