サンプルコード ———————————————————————-
<html lang="ja"><head>
<meta charset="UTF-8">
<title>サンプルコード</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
$(function(){
// 全ての駅名を非表示にする
$(".station").addClass('hide');
// 路線のプルダウンが変更されたら
$("#parent").change(function(){
// 全ての駅名を非表示にする
$(".station").addClass('hide');
// 選択された路線に連動した駅名プルダウンを表示する
$('#' + $("#parent option:selected").attr("class")).removeClass("hide");
});
})
</script>
<style type="text/css"><!--
.hide { display: none; }
--></style>
</head>
<body>
<form>
<select id="parent">
<option value="">路線を選択</option>
<option class="k" value="ku.csv">琴平線 – 上り</option>
<option class="k" value="kd.csv">琴平線 – 下り</option>
<option class="n" value="nu.csv">長尾線 – 上り</option>
<option class="n" value="nd.csv">長尾線 – 下り</option>
<option class="s" value="su.csv">志度線 – 上り</option>
<option class="s" value="sd.csv">志度線 – 下り</option>
</select>
<select id="k" class="station">
<option value="">駅を選択</option>
<option value="0">高松築港</option>
</select>
<select id="n" class="station">
<option value="">駅を選択</option>
<option value="0">高松築港</option>
</select>
<select id="s" class="station">
<option value="">駅を選択</option>
<option value="0">瓦 町</option>
</select>
</form>
</body>
– 動作サンプル
以上です!