階層のあるセレクトボックス(JavaScript)

カスタムデータ属性`data-group`,`data-subgroup`をoptionタグにつけて
階層のあるセレクトボックスを連動させます。
例は3段階ですが何段階でもいけます。
車輪の再発明な気はするけど。
2018/01/25 複数選択プルダウンに対応しました。

### どういう動き？
単一選択プルダウンの場合

<p data-height="265" data-theme-id="0" data-slug-hash="JMQKKM" data-default-tab="html,result" data-user="momosetkn" data-embed-version="2" data-pen-title="JMQKKM" class="codepen">See the Pen <a href="https://codepen.io/momosetkn/pen/JMQKKM/">JMQKKM</a> by momosetkn (<a href="https://codepen.io/momosetkn">@momosetkn</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

複数選択プルダウンの場合

<p data-height="265" data-theme-id="0" data-slug-hash="eyPMqg" data-default-tab="html,result" data-user="momosetkn" data-embed-version="2" data-pen-title="eyPMqg" class="codepen">See the Pen <a href="https://codepen.io/momosetkn/pen/eyPMqg/">eyPMqg</a> by momosetkn (<a href="https://codepen.io/momosetkn">@momosetkn</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### ソースコード
```html:セレクトボックスの例
<select name="area1" id="area1">
	<option data-subgroup="" value="">未選択</option>
	<option data-subgroup="nihon" value="1">日本</option>
	<option data-subgroup="amerika" value="2">アメリカ</option>
	<option data-subgroup="doitu" value="3">ドイツ</option>
</select>
<select name="area2" id="area2">
	<option data-group="" value="">未選択</option>
	<option data-group="nihon" data-subgroup="tokyo" value="1">東京</option>
	<option data-group="nihon" data-subgroup="niigata" value="2">新潟</option>
	<option data-group="nihon" data-subgroup="okinawa" value="3">沖縄</option>
	<option data-group="amerika" data-subgroup="nyu-yo-ku" value="1">ニューヨーク</option>
	<option data-group="amerika" data-subgroup="sikago" value="2">シカゴ</option>
	<option data-group="doitu" data-subgroup="kerun" value="1">ケルン</option>
</select>
<select name="area3" id="area3">
	<option data-group="" value="">未選択</option>
	<option data-group="tokyo" value="1">品川区</option>
	<option data-group="niigata" value="2">港区</option>
	<option data-group="okinawa" value="3">江東区</option>
	<option data-group="nyu-yo-ku" value="1">ニューヨークのどこか1</option>
	<option data-group="nyu-yo-ku" value="2">ニューヨークのどこか2</option>
	<option data-group="sikago" value="1">シカゴのどこか1</option>
	<option data-group="sikago" value="2">シカゴのどこか2</option>
	<option data-group="kerun" value="1">ケルンのどこか</option>
</select>
```

```js:セレクトボックスイベント初期設定
//地域セレクトボックスイベント設定
setHierarchySelectEvent('#area1', '#area2');
setHierarchySelectEvent('#area2', '#area3');
//セレクトボックスの初期値
$('#area1').val('1').change();
$('#area2').val('2').change();
$('#area3').val('2').change();

/**
 * 階層のあるプルダウンのイベントを設定します.
 * 親のselectタグには属性data-subgroupが設定されている必要があります。
 * 子のselectタグには属性data-groupが設定されている必要があります。
 * @param parentSelect 親となるselectタグのセレクタ
 * @param childSelect 子となるselectタグのセレクタ
 */
function setHierarchySelectEvent(parentSelect, childSelect){
  var initCategorySmallHtml = $(childSelect).html();
  $(parentSelect).change(function(){
    var subgroups = []
    $(this).find('option:selected').each(function(index, element){
      subgroups.push($(element).attr('data-subgroup'));
    });

    $(childSelect).html(initCategorySmallHtml);
    $(childSelect).find("option").each(function(index, element){
      var group = $(element).attr('data-group');
      if( group ){
        if( subgroups.includes(group) ){
          //$(element).css('display', 'block');//IEではoptionタグに対してdisplayは効かないため
        }else{
          //$(element).css('display', 'none');//IEではoptionタグに対してdisplayは効かないため
          $(element).remove();
        }
      }
    });
    $(childSelect).val('').change();//未選択時の値は''じゃない場合は書き換えてね
  });
}
```