連動するドロップダウンリストの実装方法
共有すること
連動するドロップダウンリストをjQueryで実装する方法
（ここでは、東京メトロの路線・駅・方面を例にする。）
Q.連動するドロップダウンリストを実装するのはなぜ？
A.ユーザーの利用しやすさが向上するため。
selectタグの内容
《selectタグ その①》路線名（line_list）
東京メトロの路線名（全９路線）を配置。
《selectタグ その②》駅名（station_list）
①で路線を選択すると、その路線の駅のみが表示される。
《selectタグ その③》方面（direction_list）
②で駅名を選択すると、その駅から出発する電車の方面を選択できる。
コード例
※備考※
各タグのvalueの値は、今回の連動するドロップダウンリストの実装には直接関係ありません。
（東京メトロが公開しているオープンデータと連携したアプリを制作するためには、このvalueの値が必要）
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
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］ではこの方法で実装しても、ドロップダウンリストは連動できません。