(JavaScript)Optionへのdisable追加について

Question

###やりたいこと
プルダウンが2つあり、「エリア」プルダウンの選択肢によって「アトラクション」プルダウン選択肢が絞られるような機能を実装しています。

プルダウンの「----選択してください」および「----エリアを選択してください」にJavaScriptを使ってdisable属性を付加したいのですが、下記「画像付き説明②」に記載のコードを付与したところアトラクションの選択肢絞り込みが解除されてしまいます。

「----選択してください」を非活性にした後も変わらず絞り込みを行うようにしたいのですが原因が分からず、お手数ですがコードレビューいただけますと幸いです。
よろしくお願い致します。

なお、JSを使わず、HTMLのoptionタグに直接disableを追記するという方法は考えておりません。
飽くまでJSを用いたdisableの追加方法についてご教示頂けますと幸いです。

###画像付き説明
①エリアが「----選択してください」の時、アトラクションは「----エリアを選択してください」だけに絞り込まれている。



②しかし、下記JSコードを加えたところ、指定した選択肢は非活性になるが、アトラクションの絞り込みが解除される。

    document.getElementById('id_area').options[0].disabled=true;
    document.getElementById('id_attraction').options[0].disabled=true;    

③ただし、指定したoption以外の選択肢については絞り込み機能が変わらず有効です。

###各種コード
必要と思う部分のみ記載しております。
情報に不足ありましたらご指摘いただけますと幸いです。

<div>
    <h2 class="ttl-bd mt-4 mb-4">投稿情報</h2>
</div>

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="formpost">
        <div>エリア<span>※必須</span></div>   
        <select name="area" class="form-control" id="id_area">
　　　　　　　　　　　　　　　　　　　　　　　　　<option value="----選択してください">----選択してください</option>　　　　　　　　　　　　　　　　　　　　　　　　    
　　　　　　　　　　　　　　　　　　　　　　　　　<option value="選択肢A">選択肢A</option>
            　<option value="選択肢B">選択肢B</option>
        　</select>
    </div>
    <div class="formpost">
        <div>アトラクション<span>※必須</span></div>
        <select name="attraction" class="form-control" id="id_attraction">
　　　　　　　　　　　　　　　　　　   <option value="----エリアを選択してください">----エリアを選択してください</option>
　　　　　　　　　　　　　　　　　　　　　　　　<option value="選択肢a">選択肢a</option>
        　　　　　　　　<option value="選択肢b">選択肢b</option>
　　　　　　　　　　　　　　　　　　　　　　　　<option value="選択肢c">選択肢c</option>
           　　<option value="選択肢d">選択肢d</option>
        </select>
    </div>
</form>

<script>
    document.getElementById('id_area').options[0].disabled=true;
    document.getElementById('id_attraction').options[0].disabled=true;
    const areaElement = $('#id_area');
    const attractionElement = $('#id_attraction');
    const area_attraction = {
        '----選択してください': [
            {
                'value': '----エリアを選択してください',
                'name': '----エリアを選択してください'
            },
        ],
　　　　　　　　　　　　　　　　'選択肢A': [
            {
                'value': '選択肢a',
                'name': '選択肢a'
            },
            {
                'value': '選択肢b',
                'name': '選択肢b'
            },
        ],
        '選択肢B': [
            {
                'value': '選択肢c',
                'name': '選択肢c'
            },
            {
                'value': '選択肢d',
                'name': '選択肢d'
            },
        ],
    };
    const changeArea = (select) => {
        attractionElement.children().remove();
        const parentId = areaElement.val();
        const categoryList = area_attraction[parentId];
        for (const category of categoryList) {
            const option = $('<option>');
                option.val(category['value']);
                option.text(category['name']);
                attractionElement.append(option);
            }
            if (select !== undefined) {
                attractionElement.val(select);
            }
        };
    $('#id_area').on('change', () => {
        changeArea();
    });
    if (areaElement.val()) {
        const selectedCategory = attractionElement.val();
        changeArea(selectedCategory);
    }

###開発環境
HTML5
Bootstrap 4.7.0
Django 2.2.16
jQuery 3.5.1

Answer 1

<script>
HTMLElement.prototype.trigger=function(eventStr){
  const e = document.createEvent("HTMLEvents");
  e.initEvent(eventStr, true, true );
  return this.dispatchEvent(e);
};
window.addEventListener('DOMContentLoaded', ()=>{
  const sela=document.querySelector('#sela');
  const selb=document.querySelector('#selb');
  const datab=[...selb.options];
  const clearb=()=>[...selb.querySelectorAll('option:not(:first-child)')].forEach(x=>x.remove());
  sela.addEventListener('input',()=>{
    clearb();
    datab.filter(x=>x.dataset["a"]==sela.value).forEach(x=>selb.appendChild(x));
  });
  sela.trigger('input');
});
</script>
<form>
<select name="a" id="sela" required>
<option value="">--</option>
<option value="1">a1</option>
<option value="2">a2</option>
<option value="3">a3</option>
</select>
<select name="b" id="selb" required>
<option value="">--</option>
<option value="1" data-a="1">b1</option>
<option value="2" data-a="1">b2</option>
<option value="3" data-a="1">b3</option>
<option value="4" data-a="2">b4</option>
<option value="5" data-a="2">b5</option>
<option value="6" data-a="2">b6</option>
<option value="7" data-a="3">b7</option>
<option value="8" data-a="3">b8</option>
<option value="9" data-a="3">b9</option>
</select>
<input type="submit" value="send">
</form>

Comments

[minari766]

disabledを使わずに、予め付与した属性で制御する方法もあるんですね。
ありがとうございます、勉強になります！

Answer 2

そもそも論にはなりますが、エリアが未選択の場合には、アトラクションのセレクトボックス全体をdisabledにするのが適切ではないでしょうか？

Comments

[minari766]

本当におっしゃる通りです！
実はその方法も検討したんですが、技術的に断念した経緯があります。
下記コードで対応できないかと今思い付きましたので、こちらの方法でも検討してみます。
```JavaScript
const select = document.getElementById('id_area').options[0];
select.disabled=true
```