JavaScriptでセレクトボックスの値を動的に生成し、webサイトに表示できるようにしたいです。

前提・実現したいこと

JavaScriptでセレクトボックスの値を動的に生成し、webサイトに表示しようとしています。
一つ目のセレクトボックスを選択したら、二つ目のセレクトボックスに値が自動で反映されるようにしたいのですが上手く作動しません。Scriptファイルを埋め込む場所が間違っているのでしょうか？

該当のソースコード

使用言語　HTML/JavaScript

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body>  <select name="genre" id="genre"> <option disabled selected>ジャンルを選択してください</option> <option value="japaneseFoods">和食</option> <option value="chineseFoods">中華</option> <option value="italianFoods">イタリアン</option> </select>  <script> //料理ジャンルの値と、それに対応するメニュー一覧を格納しておく -- [1] const foodMenu = { "japaneseFoods": ["寿司", "天ぷら", "おでん"], "chineseFoods": ["八宝菜", "麻婆豆腐", "エビチリ"], "italianFoods": ["パスタ", "ピザ", "ミネストローネ"] }; //選択されたジャンルを受け取って処理をする -- [4] const setMenuOptions(selectedGenre){ const selectFoodName = document.getElementById('food-name'); //2つめのセレクトボックスを取得し menuList.disabled = false; //選択可能な状態にする //選択されたジャンルのメニュー一覧に対して処理をする foodMenu[selectedGenre].forEach((menu, index) => { const option = document.createElement('option'); //option要素を新しく作る option.value = index; //option要素の値に、メニューを識別できる番号を指定する option.innerHTML = menu; //ユーザー向けの表示としてメニュー名を指定する selectFoodName.appendChild(option); //セレクトボックスにoption要素を追加する }); } 　 //ジャンルを選ぶためのセレクトボックスを指定 -- [2] const genreSelect = document.getElementById('genre'); //なんらかのジャンルが選択されたら（change）、処理を行う -- [3] genreSelect.addEventListener('change', (e) => { setMenuOptions(e.target.value); //選択された料理ジャンルを引数として関数に渡す　//※e.target.valueはgenreSelectで選択された値 }) </script> <select name="food-name" id="food-name" disabled> <option disabled selected>料理を選択してください</option> </select> </body> </html>

試したこと

・JavaScriptはHTMLから呼び出す方法を試しました。
（エラーとなってしまい、できなかったため直接HTMLに書き込む式を選択しました）

行動規範の内容に同意します

回答2件

ベストアンサー

元ソースを最大限活かすとこんな感じ

javascript
1<script>
2const foodMenu = {
3  "japaneseFoods": ["寿司", "天ぷら", "おでん"],
4  "chineseFoods": ["八宝菜", "麻婆豆腐", "エビチリ"],
5  "italianFoods": ["パスタ", "ピザ", "ミネストローネ"]
6};
7
8function setMenuOptions(selectedGenre){
9  const selectFoodName = document.getElementById('food-name');
10  selectFoodName.disabled = false;
11  selectFoodName.querySelectorAll('option:not(:first-child)').forEach(x=>x.remove());
12  foodMenu[selectedGenre].forEach((menu, index) => {
13    const option = document.createElement('option');
14    option.value = index;
15    option.innerHTML = menu;
16    selectFoodName.appendChild(option);
17  });
18}
19window.addEventListener('DOMContentLoaded', ()=>{
20  const genreSelect = document.getElementById('genre');
21  genreSelect.addEventListener('change', (e) => {
22    setMenuOptions(e.target.value);
23  });
24});
25
26</script>
27<form>
28<select name="genre" id="genre">
29<option disabled selected>ジャンルを選択してください</option>
30<option value="japaneseFoods">和食</option>
31<option value="chineseFoods">中華</option>
32<option value="italianFoods">イタリアン</option>
33</select>
34<select name="food-name" id="food-name" disabled required>
35<option value="">料理を選択してください</option>
36</select>
37<input type="submit" value="send">
38</form>

まだまだ改善の余地はありますが・・・

投稿2021/11/01 02:21

yambejp

総合スコア115012

lolo2020

2021/11/01 05:38

ご回答いただき、ありがとうございます。元々のコードと何が違うのか勉強させていただきます。質問の仕方が不適切であるにも関わらず、丁寧に教えていただき本当にありがとうございました。

行動規範の内容に同意します

関数リテラルの定義が間違っています。

Diff
1- const setMenuOptions(selectedGenre){
2+ const setMenuOptions = function(selectedGenre){

これで選択時にsetMenuOptionsが呼ばれるようになりますが、ここで定義されていない変数menuListが参照されているようですので修正してください。

投稿2021/10/31 12:21

itagagaki

総合スコア8402

lolo2020

2021/10/31 12:46

迅速にご回答いただきありがとうございます。 + const setMenuOptions = function(selectedGenre){の箇所、修正いたしました。 menuList.disabled = false; は、foodMenu.disabled = false; とすれば参照可能になるということでしょうか？勉強不足な質問で大変申し訳ないのですが、ご教授いただけますと有り難いです。

itagagaki

2021/10/31 13:00

あの、ぜんぜん違うと思いますが… ここまでこのコードを書かれたのなら、そのくらいはわかると思うのですが、あなたが書いたコードではないのでしょうか？

lolo2020

2021/10/31 13:13

「JavaScriptでセレクトボックスの値を動的に生成する」方法を勉強したく、ネットに上がっていたものをお借りしました。そのため、私が書いたコードではありません。どう動くのかを試してみたいと思い、実行したのですが上手く動かず、どこが間違っているのか教えていただきたく、質問させていただきました。JavaScriptの知識は全くない状態の質問であり、申し訳ないです。

itagagaki

2021/10/31 16:28

teratailは技術的な質問をするところです。自分で説明のできないコードを出されて、自分が期待する結果となるよう直してくれというのでは、質問ではなく、作業依頼だと思いますので、他を当たってください。もしご自分でコードを書いたり直したりして、何か技術的な問題に直面したときには具体的に質問してください。

lolo2020

2021/11/01 05:41

了解しました。回答いただき、ありがとうございました。

行動規範の内容に同意します

あなたの回答