jquery セレクトボックスで表示内容を変える

JavaScript
  <!-- 選択 -->
  <select id="select">
    <option value="">ー</option>
    <option value="1" id="value1">選択1</option>
    <option value="2" id="value2">選択2</option>
  </select>
  <!-- 開閉セットbox -->
  <div id="display">
    <div id="box1" style="display: none;"><p>選択111111でここが表示</p></div>
    <div id="box2" style="display: none;"><p>選択でここが表示2222222</p></div>
  </div>

<script type="text/javascript">
$(function(){
    /* selectボックスの選択が変更したら中の処理を実行 */
    $('#select').change(function(){
        /* 選択したselectボックスのvalue値を取得して、変数valに入れる */
        var val = $(this).val();
        /* 変数valの値ごとに、処理をswichでふりわけ */
        switch (val) {
            case '1':
                /* #box1を表示 */
                $('#box1').show();
                /* divのidに「box」を含むid名がついているもので、box1じゃないものは非表示 */
                $('div[id^="box"]:not("#box1")').hide();
            break;
            case '2':
                /* #box2を表示 */
                $('#box2').show();
                /* divのidに「box」を含むid名がついているもので、box2じゃないものは非表示 */
                $('div[id^="box"]:not("#box2")').hide();
            break;
            /* caseで設定した以外の処理 */
            default:
                /* divのidに「box」を含むid名がついているものは非表示 */
                $('div[id^="box"]').hide();
        }
    });
});
</script>

 

参考サイト:https://qiita.com/izcomaco/items/ea8158c255bd07513400

コメント

タイトルとURLをコピーしました