質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2240閲覧

【Javascript】ラジオボタンとセレクトボックス2つの分岐で最後のセレクトボックスで選択できる内容を変えたいのですが、うまくいきません。

mr.

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/02/11 18:49

ほぼ同じ内容で質問を投稿し、解決したのですが、仕様変更のため再質問です。

###前提

・カートの仕様上、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でやりたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2017/02/11 19:21

上記の記述だとラジオボタンでの表示非表示ができたとの記述がありますが、こちらではそれを確認できません。ラジオボタンでの表示非表示とはどのような処理ですか?
mr.

2017/02/12 04:07 編集

説明が不足していました。ラジオボタンでのselection04セレクトボックスを囲むdivのdisplay:none;の切り替えです。しかし、恥ずかしながら非表示にしても送信されるとは知りませんでした。よく調べもせず安易に質問をしてしまいました。もう一度根本から作り直してみようかと思います。参考になるページありがとうございました。
kei344

2017/02/12 05:44

「根本から作り直し」であれば、一旦自己解決にされてはいかがでしょうか。(質問が「受付中」になっているため)
mr.

2017/02/12 09:03

一旦自己解決としました。失礼しました。
guest

回答1

0

自己解決

根本的に作り直す前に載せたコードを少し修正してみました。そもそもの記述が間違っている部分がありましたのでその修正をしたのと、これまでに頂いたアドバイスをもとにこのようになりましたが、selection05のセレクトボックスがラジオボタンの変更で初期化出来ないのがなぜかわからないのですが、
selection04のセレクトボックスを選択をすると思惑通りにselection05のセレクトボックスは表示されるようになりました。
皆様貴重なアドバイス本当にありがとうございました。

<!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 id="radioSetNameA" type="radio" value="A" name="selection02" onClick="typeChange();" checked /> </li> <li> <input id="radioSetNameB" type="radio" value="B" name="selection02" onClick="typeChange();" /> </li> </ul> <div id="typeA" class="select_area"> <select id="setNameA" onChange="typeChangeA();"> <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 id="setNameB" onChange="typeChangeB();"> <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(); } //--> <!-- function typeChange() { radio = document.getElementsByName('selection02'); if (radio[0].checked) { var elA = document.getElementById("radioSetNameA"); elA.addEventListener("load", typeChangeA, false); document.getElementById('typeA').style.display = "block"; var element1 = document.getElementById("setNameA"); element1.setAttribute("name", "selection04"); var element2 = document.getElementById("setNameB"); element2.removeAttribute("name", "selection04"); document.getElementById('typeB').style.display = "none"; document.webselect.selection04.selectedIndex = 0; document.webselect.selection05.selectedIndex = 0; } else if (radio[1].checked) { var elB = document.getElementById("radioSetNameB"); elB.addEventListener("load", typeChangeB, false); document.getElementById('typeB').style.display = "block"; var element3 = document.getElementById("setNameB"); element3.setAttribute("name", "selection04"); var element4 = document.getElementById("setNameA"); element4.removeAttribute("name", "selection04"); document.getElementById('typeA').style.display = "none"; document.webselect.selection04.selectedIndex = 0; document.webselect.selection05.selectedIndex = 0; } } //--> <!-- 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") { select4.options[0] = new Option("74cm_72cm"); select4.options[1] = new Option("76cm_72cm"); } else if (select3.options[select3.selectedIndex].value == "37") { select4.options[0] = new Option("74cm_74cm"); select4.options[1] = new Option("76cm_74cm"); } else if (select3.options[select3.selectedIndex].value == "38") { select4.options[0] = new Option("74cm_74cm"); select4.options[1] = new Option("76cm_74cm"); } else if (select3.options[select3.selectedIndex].value == "39") { select4.options[0] = new Option("74cm_74cm"); select4.options[1] = new Option("76cm_74cm"); } else if (select3.options[select3.selectedIndex].value == "40") { select4.options[0] = new Option("74cm_76cm"); select4.options[1] = new Option("76cm_76cm"); } else if (select3.options[select3.selectedIndex].value == "41") { select4.options[0] = new Option("76cm_76cm"); select4.options[1] = new Option("78cm_76cm"); } else if (select3.options[select3.selectedIndex].value == "42") { select4.options[0] = new Option("76cm_76cm"); select4.options[1] = new Option("78cm_76cm"); } else if (select3.options[select3.selectedIndex].value == "43") { select4.options[0] = new Option("76cm_76cm"); select4.options[1] = new Option("78cm_76cm"); } else if (select3.options[select3.selectedIndex].value == "44") { select4.options[0] = new Option("78cm_76cm"); select4.options[1] = new Option("80cm_79cm"); } else if (select3.options[select3.selectedIndex].value == "45") { select4.options[0] = new Option("78cm_76cm"); select4.options[1] = new Option("80cm_79cm"); } } //--> </script> </body> </html>

投稿2017/02/12 09:02

mr.

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問