Q&A
質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
アパレル商品の注文画面を制作中なのですが、分岐をJavascriptで書いています。どこが間違っているのか教えていただきたいです。
###前提・実現したいこと
・カートの仕様上、name属性値は変えられない。←※重要です※
・本来はラジオボタンの選択内容によって<select name="selection05">の内容が変わってくる2択でも良いのだが、選択肢が多くなりすぎるため、<select name="selection04">で枝分かれを増やして<select name="selection05">に表示される内容を減らしたいという意図がある。
追記：
ラジオボタン<input name="selection02">はA,Bどちらを選択してもセレクトボックス<select name="selection04">の表示は下記のようにしたいです。valueは数字のみです。
【36cm】
【37cm】
【38cm】
【39cm】
【40cm】
【41cm】
【42cm】
【43cm】
【44cm】
【45cm】
そして<select name="selection05">に表示されるセレクトボックスの内容は、
ラジオボタンAを選択、<select name="selection04">の36cmを選んだ場合は、下記のようにしたいです。
【74cm_74cm】
【76cm_74cm】
ラジオボタンBを選択、<select name="selection04">の36cmを選んだ場合は、下記のようにしたいです。
【74cm_72cm】
【76cm_72cm】
###該当のソースコード
<script type="text/javascript"> <!-- window.onload = function () { typeChange(); typeChangeA(); typeChangeB(); } //--> <!-- function typeChange() { radio = document.getElementsByName('selection02'); if (radio[0].checked) { document.getElementById('typeA').style.display = ""; document.getElementById('typeB').style.display = "none"; } else if (radio[1].checked) { document.getElementById('typeB').style.display = ""; document.getElementById('typeA').style.display = "none"; } } //--> <!-- function typeChangeA() { var select1 = document.forms.webselect.selection04; var select2 = document.forms.webselect.selection05; select2.options.length = 0; if (select1.options[select1.selectedIndex].value == "36") { select2.options[0] = new Option("74cm_74cm"); select2.options[1] = new Option("76cm_74cm"); } else if (select1.options[select1.selectedIndex].value == "37") { select2.options[0] = new Option("74cm_74cm"); select2.options[1] = new Option("76cm_74cm"); } else if (select1.options[select1.selectedIndex].value == "38") { select2.options[0] = new Option("74cm_74cm"); select2.options[1] = new Option("76cm_74cm"); } else if (select1.options[select1.selectedIndex].value == "39") { select2.options[0] = new Option("74cm_74cm"); select2.options[1] = new Option("76cm_74cm"); } else if (select1.options[select1.selectedIndex].value == "40") { select2.options[0] = new Option("74cm_76cm"); select2.options[1] = new Option("76cm_76cm"); } else if (select1.options[select1.selectedIndex].value == "41") { select2.options[0] = new Option("76cm_76cm"); select2.options[1] = new Option("78cm_76cm"); } else if (select1.options[select1.selectedIndex].value == "42") { select2.options[0] = new Option("76cm_76cm"); select2.options[1] = new Option("78cm_76cm"); select2.options[2] = new Option("80cm_78cm"); } else if (select1.options[select1.selectedIndex].value == "43") { select2.options[0] = new Option("76cm_76cm"); select2.options[1] = new Option("78cm_76cm"); select2.options[2] = new Option("80cm_78cm"); } else if (select1.options[select1.selectedIndex].value == "44") { select2.options[0] = new Option("78cm_76cm"); select2.options[1] = new Option("80cm_79cm"); } else if (select1.options[select1.selectedIndex].value == "45") { select2.options[0] = new Option("78cm_76cm"); select2.options[1] = new Option("80cm_79cm"); } } //--> <!-- function typeChangeB() { var select3 = document.forms.webselect.selection04; var select4 = document.forms.webselect.selection05; select4.options.length = 0; if (select3.options[select3.selectedIndex].value == "36") { select3.options[0] = new Option("74cm_72cm"); select3.options[1] = new Option("76cm_72cm"); } else if (select3.options[select3.selectedIndex].value == "37") { select3.options[0] = new Option("74cm_74cm"); select3.options[1] = new Option("76cm_74cm"); } else if (select3.options[select3.selectedIndex].value == "38") { select3.options[0] = new Option("74cm_74cm"); select3.options[1] = new Option("76cm_74cm"); } else if (select3.options[select3.selectedIndex].value == "39") { select3.options[0] = new Option("74cm_74cm"); select3.options[1] = new Option("76cm_74cm"); } else if (select3.options[select3.selectedIndex].value == "40") { select3.options[0] = new Option("74cm_76cm"); select3.options[1] = new Option("76cm_76cm"); } else if (select3.options[select3.selectedIndex].value == "41") { select3.options[0] = new Option("76cm_76cm"); select3.options[1] = new Option("78cm_76cm"); } else if (select3.options[select3.selectedIndex].value == "42") { select3.options[0] = new Option("76cm_76cm"); select3.options[1] = new Option("78cm_76cm"); } else if (select3.options[select3.selectedIndex].value == "43") { select3.options[0] = new Option("76cm_76cm"); select3.options[1] = new Option("78cm_76cm"); } else if (select3.options[select3.selectedIndex].value == "44") { select3.options[0] = new Option("78cm_76cm"); select3.options[1] = new Option("80cm_79cm"); } else if (select3.options[select3.selectedIndex].value == "45") { select3.options[0] = new Option("78cm_76cm"); select3.options[1] = new Option("80cm_79cm"); } } //--> </script> <form action="ToCart.html" method="post" name="webselect"> <ul> <li> <input type="radio" value="A" name="selection02" onClick="typeChange();" checked /> </li> <li> <input type="radio" value="B" name="selection02" onClick="typeChange();" /> </li> </ul> <div id="typeA" class="select_area"> <select onChange="typeChangeA();" name="selection04"> <option value="36">36cm</option> <option value="37">37cm</option> <option value="38">38cm</option> <option value="39">39cm</option> <option value="40">40cm</option> <option value="41">41cm</option> <option value="42">42cm</option> <option value="43">43cm</option> <option value="44">44cm</option> <option value="45">45cm</option> </select> </div> <div id="typeB" class="select_area"> <select onChange="typeChangeB();" name="selection04"> <option value="36">36cm</option> <option value="37">37cm</option> <option value="38">38cm</option> <option value="39">39cm</option> <option value="40">40cm</option> <option value="41">41cm</option> <option value="42">42cm</option> <option value="43">43cm</option> <option value="44">44cm</option> <option value="45">45cm</option> </select> </div> <div class="select_area"> <select name="selection05"> </select> </div> <input type="image" src="InCartButton.gif" name="submit"> </form>
###試したこと
前提としてカートの仕様上、name属性値は変えられないと書きましたが、あえて属性値など変えて試してみましたが、全然ダメでした。
追記：
上記の記述だとラジオボタンでの表示非表示は出来ましたが、<select name="selection05">が空欄のままで何も選べない状態になります。
関数typeChangeAとtypeChangeBにあたる<select>のname属性をそれぞれ別の値に変えて試したりしましたが、本来<select name="selection05">に表示させたい内容が<select name="selection04">に書き換えられたり、JSで命令したdisplay:noneが効かなくなったりとどうやっても出来ませんでした。恥ずかしながらJSの基礎も殆ど分からない初心者ですので、これ以上、上手に説明が出来ません。大変恐縮ですが、よろしくお願いいたします。
###補足情報(言語/FW/ツール等のバージョンなど)
本件に関してはJavascriptもしくはjQueryでやりたいです。
「<select name="selection04">のセレクトボックスを選ぶと<select name="selection05">のセレクトボックスの内容が変わるようにしたい」と質問文にありますが、題名には「ラジオボタンを選んでセレクトボックスの内容を変えたい」とありますが、どちらも実現したいということなのですか？
正確に言いますと、本来はラジオボタンの選択内容によって<select name="selection05">の内容が変わってくる2択でも良いのですが、選択肢が多くなりすぎるため、<select name="selection04">で枝分かれを増やして<select name="selection05">に表示される内容を減らしたいという事情があります。なので両方とも実現させたいです。よろしくお願いいたします。題名は変えさせていただきます。失礼いたしました。
ラジオボタンAを選択した時のセレクトボックスのリスト、ラジオボタンBを選択した時のセレクトボックスのリスト、それぞれの条件で表示したいものを箇条書きにするなど、回答者の負担軽減になるように質問を記述してください。
大変失礼いたしました。追記いたしました。
提示されていない組み合わせの時はどうするんですか？
回答2件
0
ベストアンサー
こういうことですか？
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 </style> 12</head> 13<body> 14<label> 15 <input id="change_active" type="radio" name="isactive" value="1" checked>チェック1 16</label> 17<label> 18 <input id="change_inactive" type="radio" name="isactive" value="2">チェック 19</label> 20 21<label> 22 <select id="active"> 23 <option>36cm</option> 24 <option>37cm</option> 25 <option>38cm</option> 26 </select> 27</label> 28<label> 29 <select id="inactive"> 30 <option>36cm</option> 31 <option>37cm</option> 32 <option>38cm</option> 33 </select> 34</label> 35 36<label> 37 <select id="result"> 38 39 </select> 40</label> 41<script> 42 const select_active_arr = ['74cm_74cm', '76cm_74cm']; 43 const select_inactive_arr = ['74cm_72cm', '76cm_72cm']; 44 45 document.addEventListener("DOMContentLoaded", change_value1, false); 46 47 document.getElementById("change_active").addEventListener("click", change_value1, false); 48 49 document.getElementById("change_inactive").addEventListener("click", change_value2, false); 50 51 function change_value1() { 52 document.getElementById("inactive").style.display = "none"; 53 document.getElementById("active").style.display = "block"; 54 while (document.getElementById("result").firstChild) { 55 document.getElementById("result").removeChild(document.getElementById("result").firstChild); 56 } 57 for (let i = 0; i < select_active_arr.length; i++) { 58 let option = document.createElement("option"); 59 option.text = select_active_arr[i]; 60 option.value = i; 61 document.getElementById("result").appendChild(option); 62 } 63 document.getElementById("result").children[0].selected = true; 64 } 65 66 function change_value2() { 67 document.getElementById("active").style.display = "none"; 68 document.getElementById("inactive").style.display = "block"; 69 while (document.getElementById("result").firstChild) { 70 document.getElementById("result").removeChild(document.getElementById("result").firstChild); 71 } 72 for (let i = 0; i < select_inactive_arr.length; i++) { 73 let option = document.createElement("option"); 74 option.text = select_inactive_arr[i]; 75 option.value = i; 76 document.getElementById("result").appendChild(option); 77 } 78 document.getElementById("result").children[0].selected = true; 79 } 80</script> 81</body> 82</html>
投稿2017/02/11 14:12
総合スコア14731
0
こんな感じでいいのでは？
html
1<form name="demo"> 2 <label><input type="radio" name="changeType" value="typeA">Type A</label> 3 <label><input type="radio" name="changeType" value="typeB">Type B</label> 4 <label><input type="radio" name="changeType" value="typeC">Type C</label> 5 <div> 6 <select id="sel" name="selection05"></select> 7 </div> 8</form>
js
1var typeData = { 2 typeA: [ 3 {value: 33, text: '33cm'}, 4 {value: 34, text: '34cm'}, 5 {value: 35, text: '35cm'} 6 ], 7 typeB: [ 8 {value: 43, text: '43cm'}, 9 {value: 44, text: '44cm'}, 10 {value: 45, text: '45cm'} 11 ], 12 typeC: [ 13 {value: 53, text: '53cm'}, 14 {value: 54, text: '54cm'}, 15 {value: 55, text: '55cm'} 16 ] 17} 18 19function changeSelectOptions() { 20 var type = document.forms['demo']['changeType'].value; 21 sel.innerHTML = ''; 22 for(var i = 0; i < typeData[type].length; i++) { 23 var option = document.createElement('option'); 24 option.value = typeData[type][i].value; 25 option.textContent = typeData[type][i].text 26 sel.appendChild(option); 27 } 28} 29 30var rdos = document.getElementsByName('changeType'); 31for(var i = 0; i < rdos.length; i++) rdos[i].onclick = changeSelectOptions; 32
投稿2017/02/11 12:35
編集2017/02/11 12:42
総合スコア4267
ご回答ありがとうございます。頂いたコードを埋め込んでみましたが、動きませんでした・・・
また、name属性値のselection02,selection04,selection05というのは変えてしまうとカートに商品が入れられなくなってしまうのですが、何か解決法はないものでしょうか。
あと、私の説明が足りないのかもしれません。申し訳ございません。
簡単な例を示したまでで、後は応用してシステムに組み込めばいいかと思いますが。あとname属性は変えてませんが。
知識も浅く、無礼な回答をしてしまい大変失礼いたしました。勉強させていただきます。ご回答誠にありがとうございました。
あなたの回答
tips
プレビュー
