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
回答1件
あなたの回答
tips
プレビュー