removeEventListenerを設定したいです

Question

プルダウンメニューABC３つ１組で絞り込んでいます。optionは事前に設定されているのでdisabledで特定のoptionを利用不可にします。Aのoption1〜3は選んだ時点でB,Cのoptionが同時に限定され、Aでoption4を選ぶとBにもイベントリスナを追加してCのoptionをさらに絞り込みます。
A-4を選んだ後にAを他のものに変更すると、Bに追加したイベントリスナを削除したいのですができません。JavaScript24行目でそのつもり）
JSFiddleで75行目に「Function declarations should not be placed in blocks. Use a function expression or move the statement to the top of the outer function.」と表示されますがどうすれば良いかわかりません。お分かりになる方、ご教示いただけると幸いです。何卒よろしくお願いいたします。

希望例としては以下の通りです。
A:1月　B:10日　C:13時
↓
A:10月　B:10日　C:10,11,14,15時（が選択可）
↓
A:1月　B:10日　C:10,11,14,15時（が選択可）←13になって欲しい

A:<select>
<option>...選択</option>
<option value="1">１月</option>
<option value="2">４月</option>
<option value="3">７月</option>
<option value="4">１０月</option>
</select>
B:<select>
<option>...選択</option>
<option value="1">１日</option>
<option value="2">１０日</option>
<option value="3">１５日</option>
<option value="4">３０日</option>
</select>
C:<select>
<option>...選択</option>
<option value="1">9時</option>
<option value="2">10時</option>
<option value="3">11時</option>
<option value="4">13時</option>
<option value="5">14時</option>
<option value="6">15時</option>
<option value="7">16時</option>
<option value="8">9-10時</option>
<option value="9">9-12時</option>
<option value="10">13-15時</option>
<option value="11">13−16時</option>
</select>

//セレクタをselItemに
const selItem = document.querySelectorAll("select");
//BとCは最初は選択不可
selItem[1].setAttribute("disabled", true);
selItem[2].setAttribute("disabled", true);

//Bにイベントリスナが追加されているかどうか。追加するときに１にする。
let Battached = "";
selItem[0].addEventListener("change", function(evt) {
  const selA = selItem[0];
  const selB = selItem[1];
  const selC = selItem[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;
  //selBのイベントリスナが残っていれば削除
  if (Battached == "1") {
    selB.removeEventListener("change", evt4, false);
    Battached = "";
  }

  //Aのoption１月のとき
  if (selA.value == "1") {
    //Bの制限。Aのvalueが１の場合Bはvalue1,2のみ選択可能
    selB.options[3].setAttribute("disabled", true);
    selB.options[4].setAttribute("disabled", true);
    //Cの制限。Aのvalueが１の場合Cは4のみ選択可能
    for (let item of selC.options) item.removeAttribute("disabled");
    for (let c = 1; c < 4; c++) {
      selC.options[c].setAttribute("disabled", true);
    }
    for (c = 5; c < 12; c++) {
      selC.options[c].setAttribute("disabled", true);
    }
  }

  //Aのoption４月のときBはどれでもOK,Cはvalue4のみ
  else if (selA.value == "2") {
    for (let b = 1; b < 4; b++) {
      selB.options[b].setAttribute("disabled", true);
    }
    for (let c = 1; c < 4; c++) {
      selC.options[c].setAttribute("disabled", true);
    }
    for (c = 5; c < 12; c++) {
      selC.options[c].setAttribute("disabled", true);
    }
  }

  //Aのoption７月のときBはどれでもOK,Cは8と11が選択可能
  else if (selA.value == "3") {
    for (let c = 1; c < 8; c++) {
      selC.options[c].setAttribute("disabled", true);
    }
    selC.options[9].setAttribute("disabled", true);
    selC.options[10].setAttribute("disabled", true);
  }

  //Aのoption１０月
  else if (selA.value == "4") {
    selC.disabled = true;
    //Bの制限。Aのvalueが4の場合Bはvalue2,3のみOK
    selB.options[1].setAttribute("disabled", true);
    selB.options[4].setAttribute("disabled", true);
    //Cの制限。Aのvalueが4,Bが2の場合Cは2,3,5,6のみ選択可能3の場合は2,3のみ
    selB.addEventListener("change", evt4, false);
    Battached = 1;

    function evt4() {
      selC.disabled = false;
      selC.selectedIndex = 0;
      if (selB.value == "2") { //10日
        for (let item of selC.options) item.removeAttribute("disabled");
        selC.options[1].setAttribute("disabled", true);
        selC.options[4].setAttribute("disabled", true);
        for (let c = 7; c < 12; c++) {
          selC.options[c].setAttribute("disabled", true);
        }
      } else if (selB.value == "3") { //15日
        for (let item of selC.options) item.removeAttribute("disabled");
        selC.selectedIndex = 0;
        selC.options[1].setAttribute("disabled", true);
        for (let c = 4; c < 12; c++) {
          selC.options[c].setAttribute("disabled", true);
        }
      }
    }
  }
  evt.stopPropagation(); // イベントの伝播を止める
})

Comments

[m.ts10806]

念のため、jsfiddleのプロジェクトURLを提示してもらえませんか？
トップページを提示されてもすぐ再現できるわけではありませんので。
それに場合によってはそこからforkして調整したりしたいですし。

[TakuTakahashi]

早速ありがとうございます。以下で良いでしょうか。JSFiddleは整形に2,3回使っていたくらいで機能について分かっておらず頓珍漢なことをしてるかもしれません。よろしくお願いいたします。
https://jsfiddle.net/vmgt8fLj/

Answer 1

おそらく
selItem[0].addEventListener("change", function(evt) {
部分はchangeのたびに実行（evt4関数が毎回定義）されるので、addEventListenerとremoveEventListenerで指定したevt4が一致していないのだと思います。

そのためconst selA, selB, selCとfunction evt4()を
上の階層で定義する形に修正しました。

//セレクタをselItemに
const selItem = document.querySelectorAll("select");
//BとCは最初は選択不可
selItem[1].setAttribute("disabled", true);
selItem[2].setAttribute("disabled", true);

//Bにイベントリスナが追加されているかどうか。追加するときに１にする。
let Battached = "";

const selA = selItem[0];
const selB = selItem[1];
const selC = selItem[2];

function evt4() {
  selC.disabled = false;
  selC.selectedIndex = 0;
  if (selB.value == "2") { //10日
    for (let item of selC.options) item.removeAttribute("disabled");
    selC.options[1].setAttribute("disabled", true);
    selC.options[4].setAttribute("disabled", true);
    for (let c = 7; c < 12; c++) {
      selC.options[c].setAttribute("disabled", true);
    }
  } else if (selB.value == "3") { //15日
    for (let item of selC.options) item.removeAttribute("disabled");
    selC.selectedIndex = 0;
    selC.options[1].setAttribute("disabled", true);
    for (let c = 4; c < 12; c++) {
      selC.options[c].setAttribute("disabled", true);
    }
  }
}
    
selItem[0].addEventListener("change", function(evt) {

  //同じグループの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;
  
  
  
  //selBのイベントリスナが残っていれば削除
  if (Battached == "1") {
  console.log('off');
    selB.removeEventListener("change", evt4, false);
    Battached = "";
  }

  //Aのoption１月のとき
  if (selA.value == "1") {
    //Bの制限。Aのvalueが１の場合Bはvalue1,2のみ選択可能
    selB.options[3].setAttribute("disabled", true);
    selB.options[4].setAttribute("disabled", true);
    //Cの制限。Aのvalueが１の場合Cは4のみ選択可能
    for (let item of selC.options) item.removeAttribute("disabled");
    for (let c = 1; c < 4; c++) {
      selC.options[c].setAttribute("disabled", true);
    }
    for (c = 5; c < 12; c++) {
      selC.options[c].setAttribute("disabled", true);
    }
  }

  //Aのoption４月のときBはどれでもOK,Cはvalue4のみ
  else if (selA.value == "2") {
    for (let b = 1; b < 4; b++) {
      selB.options[b].setAttribute("disabled", true);
    }
    for (let c = 1; c < 4; c++) {
      selC.options[c].setAttribute("disabled", true);
    }
    for (c = 5; c < 12; c++) {
      selC.options[c].setAttribute("disabled", true);
    }
  }

  //Aのoption７月のときBはどれでもOK,Cは8と11が選択可能
  else if (selA.value == "3") {
    for (let c = 1; c < 8; c++) {
      selC.options[c].setAttribute("disabled", true);
    }
    selC.options[9].setAttribute("disabled", true);
    selC.options[10].setAttribute("disabled", true);
  }

  //Aのoption１０月
  else if (selA.value == "4") {
    selC.disabled = true;
    //Bの制限。Aのvalueが4の場合Bはvalue2,3のみOK
    selB.options[1].setAttribute("disabled", true);
    selB.options[4].setAttribute("disabled", true);
    //Cの制限。Aのvalueが4,Bが2の場合Cは2,3,5,6のみ選択可能3の場合は2,3のみ
    selB.addEventListener("change", evt4, false);
    Battached = 1;
  }
  evt.stopPropagation(); // イベントの伝播を止める
})

Comments

[TakuTakahashi]

この度は誠にありがとうございます。
確認が遅くなり大変失礼いたしました。動作確認いたしました。

書く位置でこんなに変わるとは・・・自己流の闇雲で完全にはまっていました。

結局この案件は当時もっと条件を緩めましたが、来年は是非活用させていただきます。

最後に改めてお詫びと感謝申し上げます。