Help us understand the problem. What is going on with this article?

【jQuery】カスタムデータ属性でセレクトボックスの選択肢連動

More than 1 year has passed since last update.

はじめに

  • 子を利用不可にしたくない
  • 選択肢の順番を変えたくない
  • 親を選択解除したら、子の選択肢も再度すべて表示させたい
  • かといってDBを読みにいきたくない

この辺りをなんとかしたいと思い自作しました。

完成形

hierselect.gif

コード

<select class="hierSelect">
  <option value="">(都道府県)</option>
  <option value="1">愛媛</option>
  <option value="2">香川</option>
  <option value="3">高知</option>
  <option value="4">徳島</option>
</select>
<select id="child-opt">
  <option value="">(都市)</option>
  <option value="1" data-pref="1">松山市</option>
  <option value="2" data-pref="2">高松市</option>
  <option value="3" data-pref="3">高知市</option>
  <option value="4" data-pref="4">徳島市</option>
  <option value="5" data-pref="1">今治市</option>
  <option value="6" data-pref="2">丸亀市</option>
  <option value="7" data-pref="4">阿南市</option>
  <option value="8" data-pref="2">三豊市</option>
  <option value="9" data-pref="4">鳴門市</option>
  <option value="10" data-pref="3">南国市</option>
  <option value="11" data-pref="1">大洲市</option>
  <option value="12" data-pref="3">四万十市</option>
</select>
$(".hierSelect").change(function() {
  var parentVal = $(this).val();
  var childOpt = $('#child-opt').children();
  for ( var i=0; i<childOpt.length; i++ ) {
    var childVal = childOpt.eq(i).data('pref');
    if ( childVal === void 0 || childVal == parentVal || parentVal == '' ) {
      childOpt.eq(i).show();
    } else {
      childOpt.eq(i).hide();
    }
  }
});

selectのoption取得
$([select要素]).children();

カスタムデータ取得
$([option要素]).eq([順番]).data([データ名]);

所感

改めて見るとかなりシンプル……。

自作だと親子関係を好き勝手にできるのでいいですね。
ただ、show()hide()を使用しているので使えるブラウザが限られています。うーん。

参考サイト

プラグイン不要! jQueryで複数のセレクトボックスの選択肢を連動させる – Web制作会社トライム
jQueryのdata()で属性を取得・設定・変更する方法まとめ! _ 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト
2つのセレクトボックスを連動させるjQuery - Qiita

ありがとうございました。

ikei
雰囲気でプログラミングをやってます。趣味(ほぼGAS)とまれに仕事の備忘録。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away