- ベストアンサー
ラジオボタンとプルダウンを連動させたい
- ラジオボタンとプルダウンを連動させる方法について相談です。
- 参考にしたサイトの回答では、プルダウン→チェックボックスの連動方法が紹介されており、自分の要件には合わないと感じました。
- プルダウンの内容がラジオボタンの選択肢によって変わる仕様を実装したいです。JavaScriptの知識が浅いため、解決策を教えていただけると助かります。
- yako_k
- お礼率77% (62/80)
- JavaScript
- 回答数6
- ありがとう数4
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
もし、これで合っていたらお慰み。 違うなら誰か正解を書いてください； <script type="text/javascript"> <!-- document./*@cc_on @if(@_jscript)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 'click', function( evt ){ var tgt = evt./*@if(@_jscript)srcElement@else@*/target/*@end@*/; if( tgt.nodeName.toLowerCase()=="input" && tgt.type=="radio" && tgt.name=="r1" ){ if( tgt.form == document.forms["form1"] ){ var opt = document.forms["form1"].elements["genre"].options; opt[0].selected = true;//選択を「食べ物」にリセット for( var i = 1; i < opt.length; i++ ){ opt[i].disabled = opt[i].className.match(tgt.id)?false:true; } } } }, false ); //--> </script> </head> <body> <form name="form1" id="form1" action="#"> <p> <!--<input type="radio" name="r1" value="すべて" id="food" checked> <label>すべて</label>--> <input type="radio" name="r1" value="穀物" id="grain"> <label for="grain">穀物</label> <input type="radio" name="r1" value="果物" id="fruit"> <label for="fruit">果物</label> <input type="radio" name="r1" value="生き物" id="meat"> <label for="meat">生き物</label> </p> <!--▼追加ここから--> <p> <input type="radio" name="tuika" value="テスト1" id="test1"> <label for="test1">テスト1</label> <input type="radio" name="tuika" value="テスト2" id="test2"> <label for="test2">テスト2</label> <input type="radio" name="tuika" value="テスト3" id="test3"> <label for="test3">テスト3</label> </p> <!--▲追加ここまで--> <p> <select name="genre"> <option value="食べ物" class="food" selected>食べ物</option> <option value="お米" class="grain food">お米</option> <option value="そば" class="grain food">そば</option> <option value="りんご" class="fruit food">りんご</option> <option value="みかん" class="fruit food">みかん</option> <option value="さかな" class="meat food">さかな</option> <option value="豚肉" class="meat food">豚肉</option> </select> </p> </form> </body> </html>
その他の回答 (5)
- zeff
- ベストアンサー率69% (137/198)
#2,4ですが、 どうもこのやり方は違うような気がしてきましたので、 他の回答を待ったほうが賢明です。
- zeff
- ベストアンサー率69% (137/198)
#2です。 それでしたら、 var elm = obj.elements["r1"]; に変えるか、もっと短く、 var obj = document.getElementById("form1"); var elm = obj.elements["r1"]; ↓ var elm = document.getElementById("form1").elements["r1"]; にしてください。 プルダウンを操作するラヂオボタンのnameをr1のところに入れます。 そこを間違ってたのに後で気づいたんですが、 訂正するのを手抜きしました、すいません＾＾； あともう1個、 var s = this.form.elements["genre"], opt = s.options; ↓ var opt = this.form.elements["genre"].options; sはどこにも使って無いので意味なしでした。
- yyr446
- ベストアンサー率65% (870/1330)
オプションをdisableにするだけじゃなく、非表示にしたいなら <option value="none" selected>選択して下さい</option> も追加しといた上で、changeFunc()の中で、 f.genre.options[0].selected=true; と、 options[i].style.display=(options[i].className.match(class))?"block":"none"; も追加すればよいかな。（<option>ってblock要素だったっけ？） 後、一個一個にonChange="changeFunc(this)を付けるのが面倒なら、 イベントリスナーの追加処理ですね（省略）。 それにしても、最近のブラウザーは「W3C Selectors API Level 1」 てのを実装してるので、 document.querySelectorAll("セレクター"); を使ってもっと簡単にかけるぞ。 http://www.w3.org/TR/selectors-api/ （参考）Selectors APIの実装状況（2009年9月時点の物） IE8以上、Firefox3.5以上、safari4.0以上、opera10以上、Google chrome ならほぼ大丈夫。 http://journal.mycom.co.jp/photo/articles/2009/09/17/browserscope/images/001gl.jpg
お礼
ご回答いただき、ありがとうございました。 非表示したいなと思い、じっくりと10回ほど読ませて頂いたのですが、 私にはまったく理解できませんでした……。 もう少し勉強して、理解できるようになったら非表示もチャレンジしたい と思います。 このたびはありがとうございました！
- zeff
- ベストアンサー率69% (137/198)
radioボタン選択でselectで選べる項目を限定すればいいんですよね？ こうじゃないのかなぁ。 「食べ物」はすべてに共通しているのでdisabledしないようにするとか。 <script type="text/javascript"> <!-- var addEvent = document.addEventListener? function( node, type, handler ){ node.addEventListener( type, handler, false ); }: function( node, type, handler ){ node.attachEvent( 'on' + type, function( evt ){ handler.call( node, evt );});}; addEvent( window, "load", function(){ var obj = document.getElementById("form1"); var elm = obj.getElementsByTagName("INPUT"); for( var i = 0; i < elm.length; i++ ){ if( elm[i].type != "radio" ) continue; addEvent( elm[i], "click", function(){ var s = this.form.elements["genre"], opt = s.options; opt[0].selected = true;//選択を「食べ物」にリセット //optionのclass名がradioのidと一致したらdisabled=false for( var i = 1; i < opt.length; i++ ){ opt[i].disabled=opt[i].className.match(this.id)?false:true; } }); } }); //--> </script> </head> <body> <form name="form1" id="form1" action="#"> <p> <input type="radio" name="r1" value="すべて" id="food" checked> <label for="food">すべて</label> <input type="radio" name="r1" value="穀物" id="grain"> <label for="grain">穀物</label> <input type="radio" name="r1" value="果物" id="fruit"> <label for="fruit">果物</label> <input type="radio" name="r1" value="生き物" id="meat"> <label for="meat">生き物</label> </p> <p> <select name="genre"> <option value="食べ物" class="food" selected>食べ物</option> <option value="お米" class="grain food">お米</option> <option value="そば" class="grain food">そば</option> <option value="りんご" class="fruit food">りんご</option> <option value="みかん" class="fruit food">みかん</option> <option value="さかな" class="meat food">さかな</option> <option value="豚肉" class="meat food">豚肉</option> </select> </p> </form> </body> </html>
お礼
ご回答ありがとうございました。 すごい！ ちゃんと選択できなくなりました。ありがとうございます！ それで、もしこちらをご覧になっていたらもうひとつご教示いただけないでしょうか。 いただいたサンプルのラジオボタンの選択肢とプルダウンの間に、もうひとつラジオボタンを入れました。 今回の動作には関係のないものなのですが、そちらにチェックを入れると、プルダウンの非選択が部分的におかしくなってしまいます（プルダウンのすべてが非選択になります）。 ------------------------------------------------ <form name="form1" id="form1" action="#"> <p> <!--ここにあった<input type="radio" name="r1" value="すべて" id="food" checked>の選択肢を削除しました--> <input type="radio" name="r1" value="穀物" id="grain"> <label for="grain">穀物</label> <input type="radio" name="r1" value="果物" id="fruit"> <label for="fruit">果物</label> <input type="radio" name="r1" value="生き物" id="meat"> <label for="meat">生き物</label> </p> <!--▼追加ここから--> <p> <input type="radio" name="tuika" value="テスト1" id="test1"> <label for="test1">テスト1</label> <input type="radio" name="tuika" value="テスト2" id="test2"> <label for="test2">テスト2</label> <input type="radio" name="tuika" value="テスト3" id="test3"> <label for="test3">テスト3</label> </p> <!--▲追加ここまで--> <p> <select name="genre"> <option value="食べ物" class="food" selected>食べ物</option> <option value="お米" class="grain food">お米</option> <option value="そば" class="grain food">そば</option> <option value="りんご" class="fruit food">りんご</option> <option value="みかん" class="fruit food">みかん</option> <option value="さかな" class="meat food">さかな</option> <option value="豚肉" class="meat food">豚肉</option> </select> </p> </form> ------------------------------------------------ 解決方法がありましたら、教えていただけましたら助かります。 よろしくお願いします。
- yyr446
- ベストアンサー率65% (870/1330)
とり急ぎ、似たようなロジックで、 2つ以上チェックされた時どうされたいか書いてないので、 一つしかチェックできないようにしてあります。 （2つ以上チェックの改造は簡単、前半をコメントアウトするだけ） ※全角空白は半角空白にしてね <script type="text/javascript"> function changeFunc(obj){ var f=obj.form; //ここから一つしかチェックできないようにする処理 var chkboxs=f.getElementsByTagName("input"); for(var i=0;i<chkboxs.length;i++){ if(chkboxs[i].getAttribute("type")=="checkbox" && chkboxs[i]!=obj) chkboxs[i].checked=false; } //ここから、チェックされたクラスのオプションを不可にする処理 var class=(obj.checked)?obj.value:""; var options=f.getElementsByTagName("option"); for(var i=0;i<options.length;i++){ options[i].disabled=true; options[i].disabled=(options[i].className.match(class))?false:true; } } </script> <form> <input type="checkbox" value="food" onChange="changeFunc(this)">食べ物</option><br> <input type="checkbox" value="grain" onChange="changeFunc(this)">穀物</option><br> <input type="checkbox" value="fruit" onChange="changeFunc(this)">果物</option><br> <input type="checkbox" value="meat" onChange="changeFunc(this)">生き物</option><br> <select name="genre"> <option value="お米" class="grain food">お米 <option value="そば" class="grain food">そば <option value="りんご" class="fruit food">りんご <option value="みかん" class="fruit food">みかん <option value="さかな" class="meat food">さかな <option value="豚肉" class="meat food">豚肉 </select> </form> </body>
お礼
ご回答いただき、ありがとうございました。 今回はラジオボタンなので1箇所指定ですが、次の機会に サンプルを参考にさせていただきます。 ありがとうございました！
お礼
お礼が遅くなり、申し訳ありませんでした。 無事に動作しました。 何度も回答をいただき、貴重な知識とお時間を本当にありがとうございました！