連動型セレクトボックス

by s_hiroshi

HTML

<h1>
  連動型select要素
</h1>
<label>メーカー
  <select id="メーカー" name="メーカー">
    <option data-parent="" data-current=" " value="">選択してくだい</option>
    <option data-parent="" data-current="Apple" value="Apple">Apple</option>
    <option data-parent="" data-current="Dell" value="Dell">Dell</option>

  </select>
</label>

<label>タイプ
  <select id="タイプ" name="タイプ">
    <option data-parent="" data-current="" value="">選択してください</option>
    <option data-parent="Apple" data-current="ノート" value="ノート">ノート</option>
    <option data-parent="Apple" data-current="デスクトップ" value="デスクトップ">デスクトップ</option>
    <option data-parent="Dell" data-current="ノート" value="ノート">ノート</option>
    <option data-parent="Dell" data-current="デスクトップ" value="デスクトップ">デスクトップ</option>
    <option data-parent="Dell" data-current="サーバー" value="サーバー">サーバー</option>
  </select>
</label>

<label>製品
  <select id="製品" name="製品">
    <option data-parent="" data-current="" value="">選択してください</option>
    <option data-parent="Apple+ノート" data-current="MacBook Air" value="MacBook Air">MacBook Air</option>
    <option data-parent="Apple+ノート" data-current="MacBook Pro" value="MacBook Pro">MacBook Pro</option>
    <option data-parent="Apple+デスクトップ" data-current="iMac" value="iMac">iMac</option>
    <option data-parent="Apple+デスクトップ" data-current="iMac Pro" value="iMac Pro">iMac Pro</option>
    <option data-parent="Dell+ノート" data-current="Inspiron" value="Inspiron">Inspiron</option>
    <option data-parent="Dell+ノート" data-current="XPS" value="XPS">XPS</option>
    <option data-parent="Dell+デスクトップ" data-current="Inspiron" value="Inspiron">Inspiron</option>
    <option data-parent="Dell+デスクトップ" data-current="XPS" value="XPS">XPS</option>
    <option data-parent="Dell+サーバー" data-current="PowerEdge" value="PowerEdge">PowerEdge</option>
  </select>
</label>

<div>
  <p>選択した値に応じて、セレクトボックスの内容が変化します。</p>
</div>

JavaScript

jQuery(function($) {
  function setSelectEvent(parentSelect, currentSelect) {
    var originalHtml = $(currentSelect).html();
    $(parentSelect).on('change', function() {
      var current = $(this).find('option:selected').attr('data-current');
      var parent = $(this).find('option:selected').attr('data-parent');

      var parentData;
      if (parent) {
        parentData = parent + '+' + current;
      } else {
        parentData = current;
      }

      $(currentSelect).html(originalHtml);
      $(currentSelect).find("option").each(function(index, element) {
        var parent = $(element).attr('data-parent');
        if (parent) {
          if (parentData !== parent) {
            $(element).remove();
          }
        }
      });
      $(currentSelect).val('').change();
    });
  }

  // イベントをセット
  setSelectEvent('#メーカー', '#タイプ');
  setSelectEvent('#タイプ', '#製品');
});