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

サンプルコード ———————————————————————-

<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>

– 動作サンプル

以上です！

コメントを残す