web creating

POROA

【jQuery】2つのプルダウンと連動してselctの内容を変える方法

県などの入力フォームを作成する場合、地区を選ぶと県が自動的に表示させるjQueryを書いてみました。

なるべく、長くならないよう簡略化をして記述しています。

【デモ】









【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
  • ■同じカテゴリの記事
  • ■よく見られている記事
■最新記事
■カテゴリ一覧
CSS
Excel
Google Analytics
HTML
jQuery
PHP
SEO
WordPress
ホームページ作成
ホームページ作成講座
未分類
楽天
■アーカイブ
2018年9月
2016年12月
2016年11月
2016年10月
2016年9月
2016年8月
■ランキング