Q&A
不明点
HTMLを基本として、選択の分岐を増やしたいです。
（非常に意味の分かりづらい表現ですみません。）
以前、HTMLにJSを埋め込んでJSに遷移させたいとして、様々なご指摘を頂きました。その結果、Ajaxなどを使用しなくてはならないかもしれないと分かり、別の方法では出来ないかと思っていたところ、自分は「選択を繰り返して最終的にたどり着く画面を指定したい」ということから、HTMLの<SELECT>を使って選択肢の分岐が出来ればいいのではないかということになりました。
いろいろ検索してみた結果、HTMLの<SELECT>を使って選択肢の分岐ができる様でしたので、組んでみたところ、複数段階の選択の仕方が分からなく、行き詰ってしまいました。
実現したい内容
質問１に対して
選択肢１ 選択肢２ 選択肢３ 選択肢４ ・・・
質問１で選択肢１を選択した場合、
質問２に対して
選択肢あ 選択肢い 選択肢う ・・・・
質問１で選択肢２を選択した場合、
質問２に対して
選択肢ア 選択肢イ 選択肢ウ ・・・・
・
・
・
質問２で選択肢あを選択した場合、
質問３に対して
選択肢・・・・・・
・
・
・
発生している問題・エラーメッセージ
html
1 <select name="category" id="category"> 2 <option value="">選択してください</option> 3 <option value="10">1</option> 4 <option value="20">2</option> 5 <option value="30">3</option> 6 <option value="40">4</option> 7 <option value="50">5</option> 8 </select> 9 <p>＊＊＊＊＊</p> 10 <select name="second" id="second"> 11 <option value="">選択してください</option> 12 </select> 13 <p>＊＊＊＊＊</p> 14 <select name="third" id="third"> 15 <option value="">選択してください</option> 16 </select>
javascript
1window.onload = function() { 2 second = document.getElementById("second"); 3 category = document.getElementById("category"); 4 category.onchange = changeCategory; 5 } 6 function changeCategory() { 7 var changedCategory = category.value; 8 if (changedCategory == "10") { 9 set10(); 10 } else if (changedCategory == "20") { 11 set20(); 12 } else if (changedCategory == "30") { 13 set30(); 14 } else if (changedCategory == "code") { 15 setcode(); 16 } else if (changedCategory == "RSV") { 17 setRSV(); 18 } else { 19 } 20 } 21 22 function set10() { 23 second.textContent = null; 24 var Ver = [ 25 {cd:"", label:"選択してください"}, 26 {cd:"1000000202000001", label:"A"}, 27 {cd:"1", label:"B"}, 28 {cd:"2", label:"C"} 29 ]; 30 Ver.forEach(function(value) { 31 var op = document.createElement("option"); 32 op.value = value.cd; 33 op.text = value.label; 34 second.appendChild(op); 35 }); 36 } 37 function set20() { 38 second.textContent = null; 39 var Ver = [ 40 {cd:"", label:"選択してください"}, 41 {cd:"3", label:"D"}, 42 {cd:"4", label:"E"}, 43 {cd:"5", label:"F"} 44 ]; 45 Ver.forEach(function(value) { 46 var op = document.createElement("option"); 47 op.value = value.cd; 48 op.text = value.label; 49 second.appendChild(op); 50 }); 51 }
試したこと
{cd:"", label:"選択してください"},
このcdは何かも教えていただければ幸いです。
###追記（2020.12.14 20：30）
最終的に選択肢を選択すると選択肢別に指定されたページへ移動するようにしたいとも思っています。書き忘れてしまいました。すみません。
HTMLで表記した時にこんな感じになるもので。
回答2件
0
ベストアンサー
質問が今ひとつ要領を得なくて、これがやりたいのかな？というコードを書いてみました。
組み合わせは膨大になるので一部しか書いてませんが、書いてるところの組み合わせならちゃんと動きます。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 7 <title>多重SELECT分岐</title> 8</head> 9<body> 10 <p>第一選択肢</p> 11 <select name="category" id="category"> 12 <option value="">選択してください</option> 13 <option value="10">1</option> 14 <option value="20">2</option> 15 <option value="30">3</option> 16 <option value="40">4</option> 17 <option value="50">5</option> 18 </select> 19 <p>第二選択肢</p> 20 <select name="second" id="second"> 21 <option value="">選択してください</option> 22 </select> 23 <p>第三選択肢</p> 24 <select name="third" id="third"> 25 <option value="">選択してください</option> 26 </select> 27 28 <p><span>最終画面遷移先リンク：</span><a id="finalAnchor" href="#"></a></p> 29 <script> 30 window.onload = function() { 31 var category = document.getElementById("category"); 32 category.onchange = changeCategory; 33 var second = document.getElementById("second"); 34 second.onchange = changeSecond; 35 var third = document.getElementById("third"); 36 third.onchange = changeThird; 37 var finalAnchor = document.getElementById("finalAnchor"); 38 var finalAnchor_URL = "#"; 39 var finalAnchor_TEXT = ""; 40 } 41 42 //ブラウザバックで戻ったとき表示が崩れるので初期状態にもどす 43 window.onpageshow = function(event) { 44 if (event.persisted || window.performance && 45 window.performance.navigation.type == 2) { 46 //alert("backed"); 47 document.getElementById('category').options[0].selected = true; 48 second.textContent = null; 49 var op2 = document.createElement("option"); 50 op2.value = ""; 51 op2.text = "選択してください"; 52 second.appendChild(op2); 53 third.textContent = null; 54 var op3 = document.createElement("option"); 55 op3.value = ""; 56 op3.text = "選択してください"; 57 third.appendChild(op3); 58 finalAnchor.href = "#"; 59 finalAnchor.textContent = ""; 60 } 61 }; 62 63 function changeCategory() { 64 var changedCategory_value = category.value; 65 66 switch (changedCategory_value) { 67 case "10": 68 set10(); 69 break; 70 case "20": 71 set20(); 72 break; 73 case "30": 74 set30(); 75 break; 76 case "code": 77 setcode(); 78 break; 79 case "RSV": 80 setRSV(); 81 break; 82 default: 83 alert('警告：第一選択肢を選択してください'); 84 second.textContent = null; 85 var op2 = document.createElement("option"); 86 op2.value = ""; 87 op2.text = "選択してください"; 88 second.appendChild(op2); 89 third.textContent = null; 90 var op3 = document.createElement("option"); 91 op3.value = ""; 92 op3.text = "選択してください"; 93 third.appendChild(op3); 94 finalAnchor.href = "#"; 95 finalAnchor.textContent = ""; 96 break; 97 } 98 } 99 100 function changeSecond() { 101 var changeSecond_value = second.value; 102 103 switch (changeSecond_value) { 104 case "1000000202000001": 105 set1000000202000001(); 106 break; 107 case "1": 108 set1(); 109 break; 110 case "2": 111 set2(); 112 break; 113 case "3": 114 set3(); 115 break; 116 case "4": 117 set4(); 118 break; 119 case "5": 120 set5(); 121 break; 122 default: 123 alert('警告：第二選択肢を選択してください'); 124 third.textContent = null; 125 var op = document.createElement("option"); 126 op.value = ""; 127 op.text = "選択してください"; 128 third.appendChild(op); 129 finalAnchor.href = "#"; 130 finalAnchor.textContent = ""; 131 break; 132 } 133 } 134 135 function changeThird() { 136 var changeThird_value = third.value; 137 switch (changeThird_value) { 138 case "thirdあ": 139 finalAnchor_URL="https://www.google.com"; 140 finalAnchor_TEXT = "google"; 141 break; 142 case "thirdい": 143 finalAnchor_URL="https://www.msn.com"; 144 finalAnchor_TEXT = "msn"; 145 break; 146 case "thirdう": 147 finalAnchor_URL="https://www.yahoo.co.jp" 148 finalAnchor_TEXT = "yahoo"; 149 break; 150 case "thirdア": 151 finalAnchor_URL="https://www.xxx.co.jp" 152 finalAnchor_TEXT = "xxx"; 153 break; 154 case "thirdイ": 155 finalAnchor_URL="https://www.yyy.co.jp" 156 finalAnchor_TEXT = "yyy"; 157 break; 158 case "thirdウ": 159 finalAnchor_URL="https://www.zzz.co.jp" 160 finalAnchor_TEXT = "zzz"; 161 break; 162 default: 163 alert('警告：第三選択肢を選択してください'); 164 finalAnchor_URL = "#"; 165 finalAnchor_TEXT = ""; 166 break; 167 } 168 169 //finalAnchor.href = finalAnchor_URL; 170 //finalAnchor.textContent = finalAnchor_TEXT; 171 //上の2行をコメントアウトして、下のコメントを解除すれば、直接画面遷移する 172 window.location.href = finalAnchor_URL; 173 } 174 175 function set10() { 176 second.textContent = null; 177 var Ver = [ 178 {cd:"", label:"選択してください"}, 179 {cd:"1000000202000001", label:"A"}, 180 {cd:"1", label:"B"}, 181 {cd:"2", label:"C"} 182 ]; 183 Ver.forEach(function(value) { 184 var op = document.createElement("option"); 185 op.value = value.cd; 186 op.text = value.label; 187 second.appendChild(op); 188 }); 189 } 190 191 function set20() { 192 second.textContent = null; 193 var Ver = [ 194 {cd:"", label:"選択してください"}, 195 {cd:"3", label:"D"}, 196 {cd:"4", label:"E"}, 197 {cd:"5", label:"F"} 198 ]; 199 Ver.forEach(function(value) { 200 var op = document.createElement("option"); 201 op.value = value.cd; 202 op.text = value.label; 203 second.appendChild(op); 204 }); 205 } 206 207 function set1000000202000001() { 208 third.textContent = null; 209 var Ver = [ 210 {cd:"", label:"選択してください"}, 211 {cd:"thirdあ", label:"あ"}, 212 {cd:"thirdい", label:"い"}, 213 {cd:"thirdう", label:"う"} 214 ]; 215 Ver.forEach(function(value) { 216 var op = document.createElement("option"); 217 op.value = value.cd; 218 op.text = value.label; 219 third.appendChild(op); 220 }); 221 } 222 223 function set1() { 224 third.textContent = null; 225 var Ver = [ 226 {cd:"", label:"選択してください"}, 227 {cd:"thirdア", label:"ア"}, 228 {cd:"thirdイ", label:"イ"}, 229 {cd:"thirdウ", label:"ウ"} 230 ]; 231 Ver.forEach(function(value) { 232 var op = document.createElement("option"); 233 op.value = value.cd; 234 op.text = value.label; 235 third.appendChild(op); 236 }); 237 } 238 239 240 </script> 241</body> 242</html>
同じ値を 色々比較したいときは、else ifで繋ぐのではなくswitch caseを使ってください。
可読性もよくなり、メンテもしやすくなります。ただし、default:を必ず書いて想定外の事態のときの処理を書くようにしてください。
12/16 追記：アンカータグの書き換えをやめて自動画面遷移するようにコードを書き換えました。
ブラウザバックで戻ると表示が崩れるので初期化するコードも追加してあります。
再度、動作確認をお願いします。
投稿2020/12/14 11:50
編集2020/12/15 18:58
総合スコア501
0
Javascript で select の中身を書き換えるのは簡単なことですが、個人的にはするべきものではないと考えています。なのでHTMLですべて記述し、スクリプトで対象のものを表示しています。ちなみに見えているものでも無効にしていたりします。
専用の関数で書いてしまうと、あまり応用が利きません。
設計図を書いて(class A)、
document.addEventListener ('change', new A ('cat'), false);
document.addEventListener ('change', new A ('chk'), false);
とするだけで２通りのパターンが簡単に実現します。
class B は、URLにジャンプするためのものです。
html&js
1<!DOCTYPE html> 2<html lang="ja"> 3<meta charset="UTF-8"> 4<title>連携SELECT</title> 5<style> 6li > ol { 7 margin: 0; padding: 0; 8} 9</style> 10<body> 11<ol> 12 <li>第一選択肢 13 <p> 14 <select name="cat1"> 15 <option value="" selected>選択してください</option> 16 <option value="0">a</option> 17 <option value="1">b</option> 18 </select> 19 </p> 20 21 <li>第二選択肢 22 <ol> 23 <li> 24 <select name="cat2"> 25 <option value="">選択してください</option> 26 <option value="0">a-a</option> 27 <option value="1">a-b</option> 28 </select> 29 <li> 30 <select name="cat2"> 31 <option value="">選択してください</option> 32 <option value="2">b-a</option> 33 <option value="3">b-b</option> 34 </select> 35 </ol> 36 37 <li>第三選択肢 38 <ol> 39 <li> 40 <select name="cat3"> 41 <option value="">選択してください</option> 42 <option value="1">a-a-a</option> 43 <option value="2">a-a-b</option> 44 </select> 45 <li> 46 <select name="cat3"> 47 <option value="">選択してください</option> 48 <option value="3">a-b-a</option> 49 <option value="4">a-b-b</option> 50 </select> 51 <li> 52 <select name="cat3"> 53 <option value="">選択してください</option> 54 <option value="5">b-a-a</option> 55 <option value="6">b-a-b</option> 56 </select> 57 <li> 58 <select name="cat3"> 59 <option value="">選択してください</option> 60 <option value="7">b-b-a</option> 61 <option value="8">b-b-b</option> 62 </select> 63 </ol> 64 65 <li id="cat4">結果 66 <ol> 67 <li>まだ全て選択されていません</li> 68 <li><a href="exp.co.jp#a-a-a">a-a-a</a> 69 <li><a href="exp.co.jp#a-a-b">a-a-b</a> 70 <li><a href="exp.co.jp#a-b-a">a-b-a</a> 71 <li><a href="exp.co.jp#a-b-a">a-b-b</a> 72 <li><a href="exp.co.jp#b-a-a">b-a-a</a> 73 <li><a href="exp.co.jp#b-a-b">b-a-b</a> 74 <li><a href="exp.co.jp#b-b-a">b-b-a</a> 75 <li><a href="exp.co.jp#a-a-a">b-b-b</a> 76 </ol> 77</ol> 78<hr> 79<ol> 80 <li>第一選択肢 81 <p> 82 <select name="chk0"> 83 <option value="" selected>選択してください</option> 84 <option value="0">a</option> 85 <option value="1">b</option> 86 </select> 87 </p> 88 89 <li>第二選択肢 90 <ol> 91 <li> 92 <select name="chk1"> 93 <option value="">選択してください</option> 94 <option value="http://www.xxx.co.jp#AA">a-a</option> 95 <option value="http://www.xxx.co.jp#AB">a-b</option> 96 </select> 97 <li> 98 <select name="chk1"> 99 <option value="">選択してください</option> 100 <option value="http://www.xxx.co.jp#BA">b-a</option> 101 <option value="http://www.xxx.co.jp#BB">b-b</option> 102 </select> 103 </ol> 104</ol> 105 106<script> 107class A { 108 constructor (name) { 109 this.name = name; 110 this.reg = new RegExp ('^'+ name + '(\d+)$'); 111 this.next (document.querySelector (`*[name^="${name}"]`)); 112 } 113 114 next (e) { 115 let r; 116 if (r = this.reg.exec (e.name)) 117 this.nextStage (this.name + (Number (r[1]) + 1), Number (e.value || "-1")); 118 } 119 120 nextStage (name, no) { 121 let 122 es = document.querySelectorAll (`*[name="${name}"], #${name}>ol>li`), 123 n = no < 0 ? 0: no; 124 125 es.forEach ((e, i)=> { 126 if ('select-one' === e.type) { 127 e.disabled = no != i; 128 e.selectedIndex = 0; 129 } 130 let li = e.closest ('li'); 131 if (li) 132 li.style.display = n == i ? 'block': 'none'; 133 }); 134 135 if (es[0]) 136 this.next (es[0]); 137 } 138 139 handleEvent ({target: e}) { 140 this.next (e); 141 } 142} 143 144class B { 145 constructor (...select) { 146 this.select = select; 147 } 148 149 handleEvent ({target: e}) { 150 if (this.select.includes (e) && e.value) 151 if (confirm (e.value + 'に移動します')) 152 location.href = e.value; 153 } 154} 155//_____ 156 157document.addEventListener ('change', new A ('cat'), false); 158document.addEventListener ('change', new A ('chk'), false); 159document.addEventListener ('change', new B (...document.querySelectorAll ('select[name="chk1"]')), false); 160</script> 161
投稿2020/12/16 12:51
総合スコア616
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/15 12:42
2020/12/15 18:49 編集
2020/12/26 00:22