ほぼ同じ内容で質問を投稿し、解決したのですが、仕様変更のため再質問です。
###前提
・カートの仕様上、name属性値は変えられない。←※重要です※
・ラジオボタンの選択内容によって<select name="selection05">の内容が変わってくる。
・<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】
◆ラジオボタンAを選択、<select name="selection04">の45cmを選んだ場合は、下記のようにしたいです。
【78cm_76cm】
【80cm_79cm】
つまり<select name="selection04">の45cmを選んだ場合はセレクトボックス<select name="selection05">に【74cm_74cm】などが出ないようにしたいのです。逆も然りです。36cmを選んだ場合はセレクトボックス<select name="selection05">に【80cm_79cm】などが出ないようにしたいのです。
下記の記述の間違っている部分もしくは、別の記述方法を教えていただきたいです。
###該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>タイトル</title> <style type="text/css"> * { margin: 0; padding: 0; } </style> </head> <body> <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> <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> </body> </html>
###試したこと
私の考えたイメージでは、最初のラジオボタンで<select name="selection04">のセレクトボックスどちらか一方を非表示にして、JSの関数を2つ書けば<select name="selection05">に表示される内容を変えられるのではないかと単純に考えてましたが、上記の記述だとラジオボタンでの表示非表示は出来ましたが、<select name="selection05">が空欄のままで何も選べない状態になります。
前提としてカートの仕様上、name属性値は変えられないと書きましたが、あえて属性値など変えて試してみましたが、全然ダメでした。
恥ずかしながらJSの基礎も殆ど分からない初心者ですので、これ以上、上手に説明が出来ません。大変恐縮ですが、よろしくお願いいたします。
###補足情報(言語/FW/ツール等のバージョンなど)
本件に関してはJavascriptもしくはjQueryでやりたいです。
回答1件
あなたの回答
tips
プレビュー