質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1445閲覧

[javascript]select2で選択し3を連動して表示させたい。

webhajime

総合スコア17

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/05/15 07:35

select2で選択しselect3を連動して表示させたい。
途中まで書きましたが、現在htmlに初めからあるselect1と、javascriptでselect2に値をいれている連動しかできていません。

htmlのselect1(くだもの、やさい、いきもの)を操作した時にselect2(くだものであれば りんご、みかん、ぶどう)プルダウンの選択肢を表示。
select2を操作した時にselect3(くだものでりんごであれば 林檎、Apple)プルダウンを表示。

html

1<!DOCTYPE html> 2<html lang="Ja"> 3 <head> 4 <script type="text/javascript" src="select.js"></script> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width"> 7 <title>JS_2</title> 8 </head> 9 10<body onLoad="bsk()"> 11 <form name="sentaku" method="post" action=""> 12 <p>ぶんるい 13 <select name = "bunrui" onChange="bsk()"> 14 <option value = "くだもの">くだもの</option> 15 <option value = "やさい">やさい</option> 16 <option value = "いきもの">いきもの</option> 17 </select> 18 </p> 19 20 <p>しゅるい 21 <select name = "syurui"> 22 </select> 23 </p> 24 25 <p>漢字英語 26 <select name="kanei"> 27 </select> 28 </form> 29</body> 30 31</html> 32

javascript

1function bsk() 2{ 3 4 var select1 = document.sentaku.bunrui; 5 select2 = document.sentaku.syurui; 6 select3 = document.sentaku.kanei; 7 8 select2.options.length = 0; 9 select3.options.length = 0; 10 11if (select1.options[select1.selectedIndex].value == "くだもの") 12{ 13  select2.options[0] = new Option("りんご"); 14 select2.options[1] = new Option("みかん"); 15 select2.options[2] = new Option("ぶどう"); 16} 17 18else if (select1.options[select1.selectedIndex].value == "やさい") 19{ 20 select2.options[0] = new Option("じゃがいも"); 21 select2.options[1] = new Option("きゅうり"); 22 select2.options[2] = new Option("にんじん"); 23 select2.options[3] = new Option("たまねぎ"); 24} 25 26else if (select1.options[select1.selectedIndex].value == "いきもの") 27{ 28 select2.options[0] = new Option("ぶた"); 29 select2.options[1] = new Option("うし"); 30 select2.options[2] = new Option("とり"); 31 select2.options[3] = new Option("ひつじ"); 32 select2.options[4] = new Option("にんげん"); 33} 34 35if (select1.options[select1.selectedIndex].value =="くだもの" && select2.options[0].value ==("りんご")) 36{ 37 select3.options[0] = new Option("林檎"); 38 select3.options[1] = new Option("Apple"); 39} 40 41else if (select1.options[select1.selectedIndex].value =="くだもの" && select2.options[1].value ==("みかん")) 42{ 43 select3.options[0] = new Option("蜜柑"); 44 select3.options[1] = new Option("Orange"); 45 46} 47else if (select1.options[select1.selectedIndex].value =="くだもの" && select2.options[2].value ==("ぶどう")) 48{ 49 select3.options[0] = new Option("葡萄"); 50 select3.options[1] = new Option("Grape"); 51} 52 53 54if (select2.options[0].value == "じゃがいも") 55{ 56 select3.options[0] = new Option("poteto"); 57} 58 59 60else if (select2.options[1].value =="きゅうり") 61{ 62 select3.options[0] = new Option("Cucumber"); 63} 64 65else if (select2.options[3].value == "にんじん") 66{ 67 select3.options[0] = new Option("Carrot"); 68} 69 70else if (select2.options[3].value == "たまねぎ") 71{ 72select3.options[3] = new Option("Onion"); 73} 74 75 76 if (select2.options[0].value == "ぶた") 77{ 78 select3.options[0] = new Option("豚"); 79 select3.options[1] = new Option("Pig"); 80} 81else if (select2.options[1].value == "うし") 82{ 83 select3.options[0] = new Option("牛"); 84 select3.options[1] = new Option("Cow"); 85} 86 87} 88

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2018/05/15 07:53

ピュアなjavascriptでやりますか?jQueryなど利用してよいのでしょうか?
webhajime

2018/05/15 07:55

ピュアなjavascriptでお願いします。
guest

回答1

0

ベストアンサー

javascript

1window.addEventListener('DOMContentLoaded', function(e){ 2 var data=[ 3 {key:"くだもの",val:[ 4 {key:"りんご",val:["林檎","Apple"]}, 5 {key:"みかん",val:["蜜柑","Orainge"]}, 6 {key:"ぶどう",val:["葡萄","Grape"]}, 7 ]}, 8 {key:"やさい",val:[ 9 {key:"じゃがいも",val:["poteto"]}, 10 {key:"きゅうり",val:["Cucumber"]}, 11 {key:"にんじん",val:["Carrot"]}, 12 {key:"たまねぎ",val:["Onion"]}, 13 ]}, 14 {key:"いきもの",val:[ 15 {key:"ぶた",val:["豚","Pig"]}, 16 {key:"うし",val:["牛","Cow"]}, 17 {key:"とり",val:[]}, 18 {key:"ひつじ",val:[]}, 19 {key:"にんげん",val:[]}, 20 ]}, 21 ]; 22 document.querySelector('[name=bunrui]').addEventListener('change',function(e){ 23 var syurui=document.querySelector('[name=syurui]'); 24 for(var i=syurui.options.length-1;i>0;i--){ 25 syurui.removeChild(syurui.options[i]); 26 } 27 var v=data.filter(function(x){ 28 return x["key"]==e.target.value; 29 }); 30 if(v.length>0){ 31 v[0].val.forEach(function(x){ 32 var opt=document.createElement('option'); 33 opt.setAttribute('value',x["key"]); 34 opt.appendChild(document.createTextNode(x["key"])); 35 document.querySelector('[name=syurui]').appendChild(opt); 36 }); 37 } 38 }); 39 document.querySelector('[name=syurui]').addEventListener('change',function(e){ 40 var kanei=document.querySelector('[name=kanei]'); 41 for(var i=kanei.options.length-1;i>0;i--){ 42 kanei.removeChild(kanei.options[i]); 43 } 44 var v=data.filter(function(x){ 45 return x["key"]==document.querySelector('[name=bunrui]').value; 46 })[0].val.filter(function(x){ 47 return x["key"]==e.target.value; 48 }); 49 if(v.length>0){ 50 v[0].val.forEach(function(x){ 51 var opt=document.createElement('option'); 52 opt.setAttribute('value',x); 53 opt.appendChild(document.createTextNode(x)); 54 document.querySelector('[name=kanei]').appendChild(opt); 55 }); 56 } 57 }); 58});

HTML

1<form id="sentaku" method="post"> 2<p>ぶんるい 3<select name="bunrui"> 4<option value = "">------</option> 5<option value = "くだもの">くだもの</option> 6<option value = "やさい">やさい</option> 7<option value = "いきもの">いきもの</option> 8</select> 9</p> 10<p>しゅるい 11<select name="syurui"> 12<option value ="">------</option> 13</select> 14</p> 15<p>漢字英語 16<select name="kanei"> 17<option value = "">------</option> 18</select> 19</form> 20</body>

あとは分類が変更されたとき、孫である漢字英語をどうしたいかによります。

投稿2018/05/15 08:57

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

webhajime

2018/05/15 09:08

ありがとうございます。ifやswitchではデータ量が多くなってしまうので助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問