【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



