JQuery セレクトボックスで表示を切り替える方法

今回はセレクトボックスで選んだオプションによって表示する内容を変更する方法です。
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>
HTML

css

.items {
  display: none;
}
CSS

JQuery

$('.js-select-change').change(function () {
  var val = $('.js-select-change option:selected').val();
  if (val == 'select') return;
  $('.items').hide();
  $('#' + val ).fadeIn();
});
JavaScript

サンプル

read next