[ jQuery ] 選択したプルダウンメニューの内容によって、別のプルダウンを表示・非表示させるサンプル

選択したプルダウンメニューの内容によって、別のプルダウンを表示・非表示させる jQuery のサンプルです。

この記事の目次非表示

サンプルコード
動作サンプル

サンプルコード

<!DOCTYPE HTML>
<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>
        <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 class="station">
        <option value="">駅を選択</option>
        <option value="0">高松築港</option>
    </select>
    <select class="station">
        <option value="">駅を選択</option>
        <option value="0">高松築港</option>
    </select>
    <select class="station">
        <option value="">駅を選択</option>
        <option value="0">瓦 町</option>
    </select>
</form>
</body>
</html>