- ベストアンサー
ラジオボタンとセレクトメニューの連動が複数項目
前回の質問でフォームでラジオボタンとセレクトメニューの連動をおこなうことができましたが、これを複数項目で選択可能にしたいのですが、コードを教えて頂けませんでしょうか？ このような感じです。 用紙の種類 ◎デザインＡ ◎選択しない ◎その他｛ ｝ デザインＢ デザインＣ 色数 ◎デザインＡ ◎選択しない ◎その他｛ ｝ デザインＢ デザインＣ <m(__)m>どうか宜しくお願い致します。
- souseki2010
- お礼率30% (3/10)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
現状がどのようになっているのか不明なので、適当に設定していますが… こんな感じではどうでしょうか？（name=linkageのラジオボタンが対象） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <form action="#"> <div>用紙の種類</div> <div> <input type="radio" name="linkage" value="r1"> <select name="design"> <option value="A">デザインＡ</option> <option value="B">デザインＢ</option> <option value="C">デザインＣ</option> </select> </div> <div> <input type="radio" name="linkage" value="r2" checked>選択しない </div> <div> <input type="radio" name="linkage" value="r3">その他 <input type="text" value=""> </div> </form> <form action="#"> <div>色数</div> <div> <input type="radio" name="linkage" value="r1"> <select name="design"> <option value="A">デザインＡ</option> <option value="B">デザインＢ</option> <option value="C">デザインＣ</option> </select> </div> <div> <input type="radio" name="linkage" value="r2" checked>選択しない </div> <div> <input type="radio" name="linkage" value="r3">その他 <input type="text" value=""> </div> </form> <script type="text/javascript"> <!-- /*@cc_on@*/ (function(test){ document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){ var t = evt./*@if(1)srcElement @else@*/target /*@end@*/; if(test(t)) setDisable(t); }, false); function setDisable(t){ var i, elm, e, n, f = t.form; if(f) elm = f.elements; else return; for(i=0; e=elm[i++];) if(!test(e) && e.type!="submit" && e.type!="reset") e.disabled = true; elm = t.parentNode.childNodes; for(i=0; e=elm[i++];){ n = e.nodeName; if(e!=t && (n=="INPUT" || n=="SELECT" || n=="TEXTAREA" || n=="BUTTON")) e.disabled = false; } } //初期設定 var i, e, inp = document.getElementsByTagName("input"); for(i=0; e=inp[i++];) if(test(e) && e.checked) setDisable(e); })(function(e){ return (e.nodeName=="INPUT" && e.type=="radio" && e.name=="linkage"); }); //--> </script> </body> </html>
関連するQ&A
- セレクトメニューの選択項目によって、もう１つのセレクトメニューの項目と項目数を変更する
もう1つのセレクトメニューの項目数が同じタイプのものは、ネット上で見つけられたのですが、項目の数も違うものは見つかりませんでした。 たとえば、1つ目のセレクトメニューでAタイプとCタイプを選択すると、2つ目のセレクトメニューでは5項目から選択でき、Bタイプを選択すると、3項目から選択できるという風にしたいです。ご助言お願いします。
- ベストアンサー
- JavaScript
- ふたつのセレクトメニューの項目を外部ファイルから読み込ませて連動させたい。
はじめまして。質問させてください。 セレクトメニューを選択するときに たとえば、左のセレクトメニューに巨人を選択すると右の セレクトメニューには巨人の選手を選択する項目になり、 左のセレクトメニューから阪神と選ぶと、右のセレクトメニューの項目が阪神の選手の項目になるように左のセレクトメニューのと右のセレクトメニューを連動させたいです。 また、そのときのセレクトメニューの項目を外部ファイルから読み込ませたいのですが、（javascriptを知らない人でも項目を変更できるように） たとえば、ここのサイトのようにhttp://www.kyoto-su.ac.jp/~ushitaki/JavaScriptExample/introselect2.html 左のメニューの項目を選んだら、右の項目は左の項目にそった選択肢になるという形にしたいのです。 この場合どのようなやり方がありますでしょうか。ご教授のほどよろしくお願いいたします。 また、似たようなセレクトメニューがあるＵＲＬをご存知の方がいたら教えてください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ボタンで選択されていないセレクトメニューの非反映
現在JavaScriptを使った、HP上での簡単な見積もりページを製作しています。 チェックボックスやラジオボタン、セレクトメニューで選ばれた項目を足して、最終的にテキストボックスに合計金額を出したいと思っています。 内容は全く違いますが、画像のような感じで項目などを作りたいと思っております。 その時に、ラジオボタンでチェックされていないセレクトメニューは選択（計算に反映）されないようにしたいのです。 （「プラスチック丸型編み込み」等が選択されている時は、「蓋付きのボックス」や「蓋付きバスケット」のセレクトメニューは選択されないようにしたいのです。） 自分の作ったものでは、「色を選択」の時点では０に設定してあるのですが、「蓋付きのボックス」のセレクトメニューが他のものを選択していた場合、それが反映されてしまうのです。 計算させるだけならできるのですが、選択されないようにする方法がわからなくて困っております。 拙い文章で申し訳ないのですが、どなたか教えてくださらないでしょうか？
- 締切済み
- JavaScript
- セレクトメニューの選択項目変更で入力した値を変更する。
例 第一選択のセレクトメニューで項目Aを選択。 第二選択で項目Aの数値を取得。 第一選択のセレクトメニューで項目Bを選択。 第二選択で項目Bの数値を取得。 (第二選択はセレクトかテキスト入力の予定です) 取得した値をAもしくはBに代入。 計算式(A*2)+(2/B) もしくは 計算式a (a*2)+10 計算式b (b*2)+10 と言う風に選択項目によって代入位置を変更したいです。 計算式も代入する値も多くあるのでセレクトメニューで選択して その位置を変更したいのですが、どのようにしたらいいのでしょうか? 他に良い方法とかあるものなんでしょうか?? 初心者でサンプル例文を切り張り修正でしか作れません。(-_-;) 専門用語とか詳しく説明されても解らないと思うので、 例文だけでも書いていただいたらありがたいです。 あとはなんとか例文を参考に自分で調べて構文の仕組みを理解するのでお願いします。<(_ _)>
- ベストアンサー
- JavaScript
- ■「ラジオボタン」と「メニュー」のグループ化
フォームを作成中なのですが、 下記画像のようにラジオボタンとセレクトメニュー（プルダウンメニュー？）を選択できるようにしたいのですが、コードを教えて頂けませんでしょうか？ <m(__)m>どうか宜しくお願い致します。 ※ラジオボタンで選択できるのは一つです。 http://img2.blogs.yahoo.co.jp/ybi/1/dc/71/destrhythmer/folder/113039/img_113039_37008247_0?1311814552
- ベストアンサー
- HTML
- セレクトメニューの連動、そしてページへのリンク
[セレクトメニューA] > [セレクトメニューB] > [セレクトメニューC] …というような、まずAで選び、それに対応したメニューBのうちのひとつを選び、そして最後にCのうちのひとつを選ぶと、 (たとえば、Cのセレクトメニューには Yahoo Google Excite のようなのがあり、それらを選択すると、) あらかじめ設定しておいた該当するページへ行く、というようなしくみはどのように作ればいいのでしょうか？ ネット上を探し回って、自分で組み立てて作ってみましたが、 <!-- menu = [ ["A","B","C","D"], ["E","F","G"], ["H"] ]; function setMenu(n) { len = document.myForm.sb.options.length; for (i=len-1; i>=0; i--) { document.myForm.sb.options[i] = null; } for (i=0; i<menu[n].length; i++) { document.myForm.sb.options[i] = new Option(menu[n][i],menu[n][i]); } } menuItem = [ ["Z"], ["Y","X","W","V"], ["U","T","S","R"] ]; function setMenuItem(a) { len = document.myForm.s.options.length; for (c=len-1; c>=0; c--) { document.myForm.s.options[c] = null; } for (c=0; c<menuItem[a].length; c++) { document.myForm.s.options[c] = new Option(menuItem[a][c],menuItem[a][c]); } } // --> ───────────────── <form name="myForm"> <select name="a" onchange="setMenu(this.selectedIndex)"> <option checked selected>セレクトA</option> <option value="A">A</option> <option value="E">E</option> <option value="H">H</option> </select> > <select name="sb" onchange="setMenuItem(this.selectedIndex)"> <option selected> </option> </select> > <select name="s" onChange="popJump(this)"> <option selected > </option> </select> </form> …と、３つを連動させるまでにはいたったのですが、最後の、「セレクトCを選んだときに該当ページへジャンプ」というのができません。 このプログラムにどのような修正を加えればよいのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- セレクトメニューセレクトメニューへのジャンプ
こんにちは。 セレクトメニューの選択項目に応じて、もう１つのセレクトメニューの内容を変更する方法は大体理解したのですが、 さらにもう一つ、＋もう一つ・・・とセレクトメニューの項目をリンクさせて変更することは可能でしょうか？ 例えば、 セレクトメニュー(1) 選択 ↓ ジャンプ セレクトメニュー(2) 選択 ↓ ジャンプ セレクトメニュー(3) 選択 ↓ ジャンプ セレクトメニュー(4) 選択 ↓ 検索用CGI実行 クリック というように選ばれた各項目ごとに次のセレクトメニューにジャンプして項目の変更を行いたいです。 参考サンプル等、 どなたか情報をお持ちの方がおりましたら、 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javaScriptで連動セレクトメニュー
javaScriptで２つコンボの連動セレクトメニューを作りたいのですが、 下記URLを参考にしようと思っております。 http://homepage2.nifty.com/godakaz/laboratory/rel2sel2.html これに、[GO]ボタンをつけて、その[GO]ボタンを押すと、 各選択項目(上記URLの場合は右側の選択値)に指定したURLに飛ぶようにしたいのですが、、方法が分かりません。 参考になるサイト、アドバイス等宜しくお願いいたします。
- 締切済み
- JavaScript
- ezweb ソースでセレクトがラジオボタンになってしまいます
ezweb用のページをHTMLで作ってau機で閲覧するとセレクトで作ったフォームがラジオボタンで表示されてしまう現象がおきました。 同じ機種で別のセレクトフォームがあるページを見るときちんとポップアップメニューが出るのですが、私が作ったものはやはりラジオボタン。 何かちょっとした原因かと思いますが、ぜんぜん原因が発見できず困っています。 どなたか分かる方いらっしゃいませんでしょうか？ よろしくお願いします。 ちなみに、A1301S と A5405S で現象を確認しました。
- ベストアンサー
- その他（スマートフォン・携帯・タブレット）
- javascriptでセレクトメニューの連動と自動計算
最近、javascriptの勉強をさせてもらっております。javascriptでは自動計算ができると聞き、ハードルが高いとは思うのですが、占い好きの私に以下の事に挑戦させて下さい。 セレクトメニューの連動を使用して、誕生月を選んだら、その月に応じて異なった好きな食べ物のメニューが表示されるという事がまず最初。 そして、誕生月の各月の項目にそれぞれ異なった数字を格納して下の「S」に代入し、それと同じように、食べ物のメニューの項目のそれぞれに３個ワンセットの異なった数字を格納して下の「A,B,C」に代入したいのです。 連動はここまでで、新たに好きな３桁の数字のセレクトメニューと 好きな２桁の数字のセレクトメニューを作り、独自の計算式(1)～(6)を経て、ラッキーナンバーを出すという事をしたいのですが、セレクトメニューの各月の項目に数字を格納というか、その項目を選ぶ事により、そこの項目に設定した数字を計算式に代入させる(Sに代入)やり方が解りません。 同様に食べ物のある項目を選択すると、その項目に設定した３個ワンセットの数字を計算式に代入させる(A,B,Cに代入)やり方が解りません。 解る部分は、ある書物を参考にして書いてみましたが、つなぎ合わせた感じになってしまって、すみません。そして説明の仕方がややこしくなってしまいましたがよろしくお願いします。(独自の計算式(1)～(6)の内容は気にしないで下さい) ---------------------------------------------------------------- <html> <head> <title>あなたのラッキーナンバー</title> </head> <body> <form name="calcuation"> //セレクトメニューの連動部分が解りません。こんな感じにしたいのですが。 私の誕生月は <select name="month" onChange="calculation();"> <option value="23">1月 // ここには数字の「23(Sに代入)」が格納されている <option value="12">2月 // ここには数字の「12(Sに代入)」が格納されている <option value="56">3月 <option value="89">4月 <option value="5" selected>5月 <option value="88">6月 <option value="70">7月 <option value="">8月 <option value="">9月 <option value="">10月 <option value="">11月 <option value="">12月 </select>で、 (例えば、３月を選択すると食べ物メニューが出て選択する) 好きな食べ物は <select name="food" onChange="calculation();"> <option>トマト <option value="8,24,200">マグロ //ここには数字の「8,24,200(A,B,Cにワンセットでそれぞれに代入)」が格納されている <option value="2,205,1555">みかん //ここには数字の「2,205,1555(A,B,Cにワンセットでそれぞれに代入)」が格納されている <option>納豆 <option selected>豆腐 <option>ラーメン </select> です つまり、１月生まれでマグロが好きな場合、選択した時、「S」→「23」「A」→「8」「B」→「24」「C」→「200」を同時に代入させたいです。 ここから下の部分は参考書を元に書いてみました。 私の好きな３桁の数字は <select name="number_1" onChange="calculation();"> <option>100 <option>200 <option>300 <option>400 <option selected>500 <option>600 <option>700 <option>800 <option>900 </select>で、私の好きな２桁の数字は <select name="number_2" onChange="calculation();"> <option>10 <option>20 <option>30 <option>40 <option selected>50 <option>60 <option>70 <option>80 <option>90 </select> あなたのラッキーナンバーは<input type="text" name="number_luckey" class="text_color" value="0" size="8" maxlength="6">です。 </form> </body> </html> <script type="text/javascript"> // この辺に何かの記述が必要ですよね。 function calculation() { // 好きな３桁の数字 var number_1 = parseInt(document.calcuation.number_1[document.calcuation.number_1.selectedIndex].text); // 好きな２桁の数字 var number_2 = parseInt(document.calcuation.number_2[document.calcuation.number_2.selectedIndex].text); // 独自の計算式(1) var number_3 = number_2 * 365; // 独自の計算式(2) var number_4 = (number_3 / A) - S; // 独自の計算式(3) var number_5 = number_4 / B; // 独自の計算式(4) var number_6 = number_5 * C; // 独自の計算式(5) var number_7 = number_1 * number_2 / 20 * 365; // 独自の計算式(6) var number_luckey = number_7 - number_6; document.calcuation.number_luckey.value = number_luckey; return; } </script>
- 締切済み
- JavaScript
お礼
fujillinさま 早々のご回答ありがとうございます。 全く出来なくて悩んでいたのですごく助かりました。 あと、今それぞれの状態をformでくくってありますが、ひとつのformでくくって作ること可能ですか？ formが複数ありますと、送信がうまくいかないようなので。。。 全くの初心者で申し訳ありません。お時間ありましたら、よろしくお願いします。