今回はセレクトボックスで選んだオプションによって表示する内容を変更する方法です。
CSSは最低限しか記載していないので変更してください。
html
<select class="js-select-change"> <option value="select">選択してください</option> <option value="items-01">要素1</option> <option value="items-02">要素2</option> <option value="items-03">要素3</option></select><div class="items" id="items-01">要素１</div><div class="items" id="items-02">要素2</div><div class="items" id="items-03">要素3</div>css
.items { display: none;}JQuery
$('.js-select-change').change(function () { var val = $('.js-select-change option:selected').val(); if (val == 'select') return; $('.items').hide(); $('#' + val ).fadeIn();});
