###実現したいこと
プルダウンボックスにて親カテゴリを選択すると、その下にある子カテゴリボックスの中身が自動的に変わるという機能を実装しています。
現状、親カテゴリを選択していないと子カテゴリボックスがブランク状態になっているのですが、ここに「---子カテゴリを選択してください」という文字列を表示させるようにしたいです。
なお、本コードは下記サイトを参考にしております。
https://blog.narito.ninja/detail/50
おそらく基本的なことで恐縮ですがアドバイス頂きたくよろしくお願い致します。
各種コード
JavaScript
1<script> 2 const areaElement = $('#id_area'); 3 const attractionElement = $('#id_attraction'); 4 const area_attraction = { 5 'エリア': [ 6 { 7 'value': 'アトラクション1', 8 'name': 'アトラクション1' 9 }, 10 { 11 'value': 'アトラクション2', 12 'name': 'アトラクション2' 13 }, 14 ], 15 }; 16 const changeArea = (select) => { 17 attractionElement.children().remove(); 18 const parentId = areaElement.val(); 19 const categoryList = area_attraction[parentId]; 20 for (const category of categoryList) { 21 const option = $('<option>'); 22 option.val(category['value']); 23 option.text(category['name']); 24 attractionElement.append(option); 25 } 26 if (select !== undefined) { 27 attractionElement.val(select); 28 } 29 }; 30 $('#id_area').on('change', () => { 31 changeArea(); 32 }); 33 if (areaElement.val()) { 34 const selectedCategory = attractionElement.val(); 35 changeArea(selectedCategory); 36 } 37</script>
必要最低限のコードを記載したつもりですが、不足点ありましたがご指摘いただけますと幸いです。
バージョン
HTML5
Bootstrap 4.7.0
Python 3.6.3
Django 2.2.16
jQuery 3.5
お手数ですがご確認のほどよろしくお願い致します。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/27 01:44