今回は選択したラジオボタンによって中身が変わるプルダウンのサンプルを紹介していきたいと思います。
サンプルの動作イメージ
後ほど紹介するHTMLファイルを実行すると、以下のような画面が表示されます。
最初はラジオボタンが選択されていないので、プルダウンには、『Typeを選択』という文言した表示されません。
ラジオボタンのType1を選択すると、Type1として登録されているものがプルダウンの子要素として表示されます。
Type2を押すと、それに応じてプルダウンの中も変わっていることがわかります。
サンプルコード
続いては、上記の画面を表示するためのHTMLコードを紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テストページ</title> </head> <body> <table> <thead> <tr> <th>Input form</th> </tr> </thead> <tbody> <tr> <th>Type</th> <td> <input type="radio" name="type" value="type1" onchange="setOption(this);"/> <span>Type1</span> <input type="radio" name="type" value="type2" onchange="setOption(this);"/> <span>Type2</span> </td> </tr> <tr> <th>Category</th> <td> <select id="category" name="category"> <option value="">▼Typeを選択</option> </select> </td> </tr> </tbody> </table> <script type="text/javascript"> var type1Arr = [ {value: "", label: "▼type1"}, {value: "11", label: "11"}, {value: "12", label: "12"}, {value: "13", label: "13"}, {value: "14", label: "14"}, {value: "15", label: "15"}, ]; var type2Arr = [ {value: "", label: "▼type2"}, {value: "21", label: "21"}, {value: "22", label: "22"}, {value: "23", label: "23"}, {value: "24", label: "24"}, {value: "25", label: "25"}, ]; var otherArr = [ {value: "", label: "▼"} ]; function setOption(radio) { var target; var pullObj; var i; if ((radio.value) == 'type1') { target = type1Arr; } else if ((radio.value) == 'type2') { target = type2Arr; } else { target = otherArr; } pullObj = document.getElementById('category'); while (pullObj.lastChild) { pullObj.removeChild(pullObj.lastChild); } for (i = 0; i < target.length; i++) { let option = document.createElement('option'); option.value = target[i].value; option.text = target[i].label; pullObj.appendChild(option); } } </script> </body> </html> |
今回はJQueryを使っていないシンプルなJavascriptのコードなので、文法がわかる人なら誰でも簡単に再現することができます。
また上記のコードを丸々コピペするだけでも動作するので、よかったら使ってみてください。
