(jQuery, JavaScript)プルダウンに初期値「選択してください」を入れたい

Question

##やりたいこと
プルダウン（エリア）とプルダウン（アトラクション）があります。
プルダウン（エリア）の選択肢によりプルダウン（アトラクション）の選択肢が自動的に決まるという機能にしているのですが、プルダウン（アトラクション）の初期状態がブランクになってしまっているため、「エリアを選択してください」という一文を初期表示したいです。

現状↓

JS上にattractionElement.children().remove();と入れてしまっているため、アトラクションがブランクになってしまっているのですが、
ここに一文を追加するコードがわからず、ご教示いただけますと幸いです。

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

<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>
        <!--下記render_field{%　〜 %}はデータベースを参照するコードで再現性がなく、検証に向かないのでグレーアウトしました-->
        <!--{% render_field form.area class="form-control" placeholder="選択してください" %}-->        
            <select name="area" class="form-control" id="id_area">
　　　　　　　　　　　　　　　　　　　　　　　　    <option value="選択肢A">選択肢A</option>
                <option value="選択肢B">選択肢B</option>
            </select>
    </div>
    <div class="formpost">
        <div>アトラクション<span>※必須</span></div>
        <!--下記render_field{%　〜 %}はデータベースを参照するコードで再現性がなく、検証に向かないのでグレーアウトしました-->
        <!--{% render_field form.attraction class="form-control" placeholder="選択してください" %}-->
            <select name="attraction" class="form-control" id="id_attraction">
　　　　　　　　　　　　　　　　　　　　　　　　    <option value="選択肢a">選択肢a</option>
                <option value="選択肢b">選択肢b</option>
　　　　　　　　　　　　　　　　　　　　　　　　    <option value="選択肢c">選択肢c</option>
                <option value="選択肢d">選択肢d</option>
            </select>
    </div>
</form>

<script>
    const areaElement = $('#id_area');
    const attractionElement = $('#id_attraction');
    const area_attraction = {
        '選択肢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

Comments

[agumon]

頂いたソースをコピペして再現してみましたが、現状を再現できませんでした。
アトラクションのプルダウンも最初から触れてしまいますし、エリアのほうも「選択してください」が表示されていません。
ただエリアを選択するとアトラクションの選択肢が変わるのは再現できています。
コードの修正などがほしいです。

[minari766]

ご連絡いただきありがとうございます。
実は説明用にコードを修正していたところ、事故解決してしまいました・・・。
折角お力添え頂いたにも関わらず、大変失礼致しました！

修正箇所は以下の通りです。
・アトラクションがブランクになっていなかったのは、下記の通りエリアが「----選択してください」の時のquerysetを設定していなかったためです。下記の通りvalueとnameの値に'----エリアを選択してください'を追加しました。
```JavaScript
const area_attraction = {
'----選択してください': [
{
'value': '----エリアを選択してください',
'name': '----エリアを選択してください'
},
],
```

なお、エリアに「----選択してください」が表示されていなかったのは、renderフィールド{% render_field form.area class="form-control" placeholder="選択してください" %} が、データベースから各種選択肢のデータを動的に持ってくるコードになっていたせいだと思います。
ご指摘の通りこのままだと再現性がないため、後世のため選択肢をselectタグで予めhtmlに表示するようにいたしました。

改めて、ご連絡ありがとうございました。

Answer 1

・アトラクションがブランクになっていなかったのは、下記の通りエリアが「----選択してください」の時のquerysetを設定していなかったため。下記の通りvalueとnameの値に'----エリアを選択してください'を追加。

const area_attraction = {
　　　　'----選択してください': [
　　　　　　　　{
　　　　　　　　'value': '----エリアを選択してください',
　　　　　　　　'name': '----エリアを選択してください'
　　　　　　　　},
　　　　],