【jQuery】2つのプルダウンと連動してselctの内容を変える方法
県などの入力フォームを作成する場合、地区を選ぶと県が自動的に表示させるjQueryを書いてみました。
なるべく、長くならないよう簡略化をして記述しています。
【デモ】
【HTML】
【CSS】
【jQuery】
もうちょっと、軽くできそうですが、とりあえずは、これで、OKかと思います。
なるべく、長くならないよう簡略化をして記述しています。
【デモ】
【HTML】
<select id="bigword"> <option>選択してください</option> <option>北海道</option> <option>東北</option> <option>関東</option> <option>中部</option> <option>近畿</option> <option>中国</option> <option>四国</option> <option>九州</option> </select> <br> <div id="smword"> <!-- 北海道 --> <select> <option>選択してください</option> <option>北海道</option> </select> <br> <!-- 東北 --> <select> <option>選択してください</option> <option>青森県</option> <option>岩手県</option> <option>秋田県</option> <option>宮城県</option> <option>山形県</option> <option>福島県</option> </select> <br> <!-- 関東 --> <select> <option>選択してください</option> <option>茨城県</option> <option>栃木県</option> <option>埼玉県</option> <option>千葉県</option> <option>東京都</option> <option>神奈川県</option> </select> <br> <!-- 中部 --> <select> <option>選択してください</option> <option>山梨県</option> <option>長野県</option> <option>新潟県</option> <option>富山県</option> <option>石川県</option> <option>福井県</option> <option>静岡県</option> <option>愛知県</option> <option>岐阜県</option> </select> <br> <!-- 近畿 --> <select> <option>選択してください</option> <option>三重県</option> <option>滋賀県</option> <option>京都府</option> <option>大阪府</option> <option>兵庫県</option> <option>奈良県</option> <option>和歌山県</option> </select> <br> <!-- 中国 --> <select> <option>選択してください</option> <option>鳥取県</option> <option>島根県</option> <option>岡山県</option> <option>広島県</option> <option>山口県</option> </select> <br> <!-- 四国 --> <select> <option>選択してください</option> <option>香川県</option> <option>愛媛県</option> <option>徳島県</option> <option>高知県</option> </select> <br> <!-- 九州 --> <select> <option>選択してください</option> <option>福岡県</option> <option>佐賀県</option> <option>長崎県</option> <option>熊本県</option> <option>大分県</option> <option>宮崎県</option> <option>鹿児島県</option> <option>沖縄県</option> </select> </div>
【CSS】
#smword { position:relative; margin: 0 0 -140px; } #smword select { display:none; position:absolute; top:0px; } #smword select.on { display:block; }
【jQuery】
$(function(){ $('#bigword').bind('change',function(){ var bigwordindex = $(this).prop('selectedIndex') - 1; console.log(bigwordindex ); if(bigwordindex<0){ $('#smword select').removeClass('on'); }else{ $('#smword select:not(:eq(bigwordindex)) option').attr('selected', false); $('#smword select:not(:eq(bigwordindex))').removeClass('on'); $('#smword select').eq(bigwordindex).addClass('on'); } }); });
もうちょっと、軽くできそうですが、とりあえずは、これで、OKかと思います。
著者:poroa | 投稿日:2016年10月05日 | カテゴリ:jQuery