［jQuery］連動するドロップダウンリストの実装方法

#連動するドロップダウンリストの実装方法
![image1.png](https://qiita-image-store.s3.amazonaws.com/0/199441/a42e01aa-f9e4-7242-0041-1f31df3c5ce0.png)

![image2.png](https://qiita-image-store.s3.amazonaws.com/0/199441/36e6171a-e9f1-3bca-b7e5-57a0d8c61b24.png)


## 共有すること
連動するドロップダウンリストをjQueryで実装する方法
（ここでは、東京メトロの路線・駅・方面を例にする。）

### Q.連動するドロップダウンリストを実装するのはなぜ？
A.ユーザーの利用しやすさが向上するため。

### selectタグの内容
**《selectタグ その①》路線名（line_list）**
東京メトロの路線名（全９路線）を配置。

**《selectタグ その②》駅名（station_list）**
①で路線を選択すると、その路線の駅のみが表示される。

**《selectタグ その③》方面（direction_list）**
②で駅名を選択すると、その駅から出発する電車の方面を選択できる。

## コード例
※備考※
各タグのvalueの値は、今回の連動するドロップダウンリストの実装には**直接関係ありません。**

（東京メトロが公開しているオープンデータと連携したアプリを制作するためには、このvalueの値が必要）

### HTML
```HTML:sample.html
<!-- selectタグ その① -->
<select class="mainselect" name="line_list">
  <option selected="selected" class="msg">--路線選択--</option>
  <option value="odpt.Station:TokyoMetro.Ginza" class="ginza">銀座線</option>
  <option value="odpt.Station:TokyoMetro.Marunouchi" class="marunouchi">丸ノ内線（荻窪〜池袋）</option>
  <option value="odpt.Station:TokyoMetro.Marunouchi" class="marunouchibranch">丸ノ内線（方南町〜中野坂上）</option>
  <option value="odpt.Station:TokyoMetro.Hibiya" class="hibiya">日比谷線</option>
  <option value="odpt.Station:TokyoMetro.Tozai"  class="tozai">東西線</option>
  <option value="odpt.Station:TokyoMetro.Chiyoda" class="chiyoda">千代田線（代々木上原〜綾瀬）</option>
  <option value=value="odpt.Station:TokyoMetro.Chiyoda" class="chiyodabranch">千代田線（綾瀬〜北綾瀬）</option>
  <option value="odpt.Station:TokyoMetro.Yurakucho" class="yurakucho">有楽町線</option>
  <option value="odpt.Station:TokyoMetro.Hanzomon" class="hanzomon">半蔵門線</option>
  <option value="odpt.Station:TokyoMetro.Namboku" class="namboku">南北線</option>
  <option value="odpt.Station:TokyoMetro.Fukutoshin" class="fukutoshin">副都心線</option>
</select>


<!-- selectタグ その② -->
<select name="station_list">
<option selected="custom_selected" class="msg">--駅名選択--</option>
<!-- 銀座線 odpt.Station:TokyoMetro.Ginza -->
<option class="ginza">--銀座線--</option>
<option value="odpt.Station:TokyoMetro.Ginza.Shibuya" class="ginza">渋谷</option>
<option value="odpt.Station:TokyoMetro.Ginza.Omotesando" class="ginza">表参道</option>
<option value="odpt.Station:TokyoMetro.Ginza.Gaiemmae" class="ginza">外苑前</option>
<option value="odpt.Station:TokyoMetro.Ginza.Aoyamaitchome" class="ginza">青山一丁目</option>
<option value="odpt.Station:TokyoMetro.Ginza.Akasakamitsuke" class="ginza">赤坂見附</option>
<option value="odpt.Station:TokyoMetro.Ginza.Tameikesanno" class="ginza">溜池山王</option>
<option value="odpt.Station:TokyoMetro.Ginza.Toranomon" class="ginza">虎ノ門</option>
<option value="odpt.Station:TokyoMetro.Ginza.Shimbashi" class="ginza">新橋</option>
<option value="odpt.Station:TokyoMetro.Ginza.Ginza" class="ginza">銀座</option>
<option value="odpt.Station:TokyoMetro.Ginza.Kyobashi" class="ginza">京橋</option>
<option value="odpt.Station:TokyoMetro.Ginza.Nihombashi" class="ginza">日本橋</option>
<option value="odpt.Station:TokyoMetro.Ginza.Mitsukoshimae" class="ginza">三越前</option>
<option value="odpt.Station:TokyoMetro.Ginza.Kanda" class="ginza">神田</option>
<option value="odpt.Station:TokyoMetro.Ginza.Suehirocho" class="ginza">末広町</option>
<option value="odpt.Station:TokyoMetro.Ginza.UenoHirokoji" class="ginza">上野広小路</option>
<option value="odpt.Station:TokyoMetro.Ginza.Ueno" class="ginza">上野</option>
<option value="odpt.Station:TokyoMetro.Ginza.Inaricho" class="ginza">稲荷町</option>
<option value="odpt.Station:TokyoMetro.Ginza.Tawaramachi" class="ginza">田原町</option>
<option value="odpt.Station:TokyoMetro.Ginza.Asakusa" class="ginza">浅草</option>

<!-- 丸ノ内線 odpt.Station:TokyoMetro.Marunouchi -->
<option class="marunouchi">--丸ノ内線--</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Ogikubo" class="marunouchi">荻窪</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.MinamiAsagaya" class="marunouchi">南阿佐ヶ谷</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.ShinKoenji" class="marunouchi">新高円寺</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.HigashiKoenji" class="marunouchi">東高円寺</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.ShinNakano" class="marunouchi">新中野</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.NakanoSakaue" class="marunouchi">中野坂上</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Nishishinjuku" class="marunouchi">西新宿</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Shinjuku" class="marunouchi">新宿</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.ShinjukuSanchome" class="marunouchi">新宿三丁目</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Shinjukugyoemmae" class="marunouchi">新宿御苑前</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Yotsuyasanchome" class="marunouchi">四谷三丁目</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Yotsuya" class="marunouchi">四ツ谷</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Akasakamitsuke" class="marunouchi">赤坂見附</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Kokkaigijidomae" class="marunouchi">国会議事堂前</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Kasumigaseki" class="marunouchi">霞ヶ関</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Ginza" class="marunouchi">銀座</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Tokyo" class="marunouchi">東京</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Otemachi" class="marunouchi">大手町</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Awajicho" class="marunouchi">淡路町</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Hongosanchome" class="marunouchi">本郷三丁目</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Korakuen" class="marunouchi">後楽園</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Myogadani" class="marunouchi">茗荷谷</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Shinotsuka" class="marunouchi">新大塚</option>
<option value="odpt.Station:TokyoMetro.Marunouchi.Ikebukuro" class="marunouchi">池袋</option>
<!--省略-->
</select>


<!-- selectタグ その③ -->
<select class="custom-select" name="direction_list">
<option selected="selected" class="msg">--方面選択--</option>
<option>--銀座線--</option>
<option value="odpt.RailDirection:TokyoMetro.Asakusa" class="ginza">浅草方面</option>
<option value="odpt.RailDirection:TokyoMetro.Shibuya" class="ginza">渋谷方面</option>
<option>--丸ノ内線--</option>
<option value="odpt.RailDirection:TokyoMetro.Ikebukuro" class="marunouchi">池袋方面</option>
<option value="odpt.RailDirection:TokyoMetro.Ogikubo" class="marunouchi">荻窪方面</option>
<!--省略-->
</select>
```


### JS
```JavaScript:sample.js
$(function(){

  //《selectタグ その①》路線を選択すると呼び出される関数
  $('select[name="line_list"]').change(function(){

  //《selectタグ その①》nameの値を取得
  var line_class = $('select[name="line_list"] option:selected').attr("class");
  console.log(line_class);

　//《selectタグ その②》 子要素タグの個数を数え上げ
  var count = $('select[name="station_list"]').children().length;
  console.log(count);

  for(a=0; a<count; a++){
 
        var station_list = $('select[name="station_list"] option:eq('+a+')');

　　　　　//《selectタグ その①》で選択した路線と等しいname値を持つoptionタグを表示
        if(station_list.attr("class") === line_class){
          station_list.show();
        } else {
          station_list.hide();
      }
      }

　　　　//《selectタグ その③》 子要素タグの個数を数え上げ
      for(b=0; b<count; b++){

        var direction_list = $('select[name="direction_list"] option:eq('+b+')');

　　　　　//《selectタグ その②》で選択した駅と等しいname値を持つoptionタグを表示
        if(direction_list.attr("class") === line_class){
          direction_list.show();
        } else {
          direction_list.hide();
      }
      }

  });

});
```

## 注意点
**［iOS Safari］**ではこの方法で実装しても、ドロップダウンリストは連動できません。

## 参考資料
[jQueryで2つのドロップダウンリストを連動させる方法](http://yuu.1000quu.com/jquery_hierselect)
[東京メトロオープンデータ 開発者サイト](https://developer.tokyometroapp.jp/info)