- 締切済み
selectboxとcheckbox連動
下記ソースについて質問です。 jqueryを使って、 チェックボックスにチェックを入れたら、 一個目のセレクトボックスで選択した値を 二個目のセレクトボックスで選択しているようにしたいのですが、 ここからどうしたらよいでしょうか？ 具体的な方法を教えていただけないでしょうか？ <html> <head> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script> <!-- jQuery.noConflict(); var j$ = jQuery; j$(function () { j$(":input").focus(function(){ j$(this).css("background" ,"#7DBFE2"); }).blur(function(){ j$(this).css("background" ,""); }) j$(":submit").focus(function(){ j$(this).css("background" ,""); }).blur(function(){ j$(this).css("background" ,""); }) if (j$('input[type=checkbox]:last').attr('checked')) { j$("#selectAir").removeAttr("disabled"); } else { j$("#selectAir").attr("disabled", "disabled"); } j$('input[type=checkbox]:last').click(function() { if (this.checked) { j$("#selectAir").removeAttr("disabled"); j$("#selectAir").change($("#selectAirDelivery option:selected")); } else { j$("#selectAir").attr("disabled", "disabled"); } }); }); --> </script> </head> <body> <select id="selectAirDelivery" name="selectAirDelivery" class=""> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </td> <td width="55%" bgcolor="#FFF8DF"> <input id="chkIrai_sl1608" name="chkIrai_sl1[]" type="checkbox" value="608"><label for="chkIrai_sl1608"></label> <select id="selectAir" name="selectAir" class=""> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </td> </tr> </table> </body> </html>
- itio0713
- お礼率100% (6/6)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
たんにチェックしたときにだけs2がs1と合えばよいということですかねぇ？ function func(e){ var t = (e.srcElement || e.target); var ch=document.getElementById('chkIrai_sl1608'); var sl1=document.getElementById('selectAirDelivery'); var sl2=document.getElementById('selectAir'); if(t==ch){ if(ch.checked) sl2.selectedIndex=sl1.selectedIndex; } } でよいかも
- fujillin
- ベストアンサー率61% (1594/2576)
両方のセレクタのオプション値が同じになっているという前提でよければ （jqueryはあまりよく知りませんが…） チェックしたときに（だけ）反映すればよいのなら $('#chkIrai_sl1608').click(function(){ if ($(this).attr('checked')) $('#selectAir').val($('#selectAirDelivery').val()); }); あるいは、チェックしてあれば常に連動するようにするのなら $('#selectAirDelivery').change(function(){ if ($('#chkIrai_sl1608').attr('checked')){ $('#selectAir').val($('#selectAirDelivery').val()); }});
お礼
おかげさまで仕様を満たすようにつくることができました。 ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
jQueryは使ってないので普通に・・・ <head> <script> try{ document.addEventListener('change',function(e){func(e)},true); }catch(x){ document.attachEvent('onclick',function(e){func(e)}); } function func(e){ var t = (e.srcElement || e.target); var ch=document.getElementById('chkIrai_sl1608'); var sl1=document.getElementById('selectAirDelivery'); var sl2=document.getElementById('selectAir'); if(t.nodeName=="SELECT" || (t.nodeName=="INPUT" && t.type=="checkbox")){ if(ch.checked) sl2.selectedIndex=sl1.selectedIndex; } } </script></head> <body> <select id="selectAirDelivery" name="selectAirDelivery" class=""> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </td> <td width="55%" bgcolor="#FFF8DF"> <input id="chkIrai_sl1608" name="chkIrai_sl1[]" type="checkbox" value="608"><label for="chkIrai_sl1608"></label> <select id="selectAir" name="selectAir" class=""> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </td> </tr> </table> </body> 条件を複雑にすれば結構いろいろ対応できそう
お礼
すばやい回答ありがとうございます。 二個目のセレクトボックスはチェックを入れている状態であっても、 一個目のセレクトボックスとは関係なく、 選択できるようにしたいのですが…
お礼
おかげさまで仕様を満たすようにつくることができました。 ありがとうございました。