前提・実現したいこと
javascriptによる、formの制御をしたいです。
selectで選択した値を取得した後に、その値と同じ名前の配列を見に行き、
別のselect内にその配列を一つずつoptionとして書き出したいです。
該当のソースコード
HTML
1<select id="otukai"> 2 <option value="yaoya">八百屋</option> 3 <option value="sakana">魚屋</option> 4</select> 5 6<select id="kaumono"> 7 <option value="">先におつかい先を選んでください</option> 8</select>
javascript
1var yaoya = ['りんご','みかん','レタス']; 2var sakana = ['サンマ','鯛','かつお']; 3 4var otukai = document.getElementById('otukai'); 5var kaumono = document.getElementById('kaumono'); 6 7otukai.addEventListener('change', function(){ 8 var otukai_val = otukai.value; 9 if (otukai_val !== ''){ 10 for (i = 0; i < otukai_val.length; i++) { 11 var ot = document.createElement('option'); 12 ot.textContent = (otukai_val[i]); 13 ot.value = (otukai_val[i]); 14 kaumono.appendChild(ot); 15 } 16 } 17}
発生している問題・エラーメッセージ
------------------- ▼"otukai"の"yaoya"を選択した時に、"kaumono"に対してこう表示されてほしいのですが、 ------------------- <select id="kaumono"> <option value="りんご">りんご</option> <option value="みかん">みかん</option> <option value="レタス">レタス</option> </select> ------------------- ▼"yaoya"がそのまま文字として書き出されてしまいました ------------------- <select id="kaumono"> <option value="y">y</option> <option value="a">a</option> <option value="o">o</option> <option value="y">y</option> <option value="a">a</option> </select>
試したこと
検索をしてみたのですが、
なかなか同じような状況に使用できるサンプルコードが見つからない状態になります。
ご教授の程、何卒どうぞよろしくお願いいたします。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/12 08:50
2018/11/12 08:58 編集
2018/11/13 06:25