JavaScript - 2022-03-30

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">要素1</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();
});

サンプル

Related Posts

Related Posts

WebStorageを使って初回アクセス時だけLoadingを表示する方法

2022-01-11

slick.jsにオートプレイの切り替えボタンをつける方法

2022-06-22

Datatables.jsで検索andページングandソート機能を実装

2017-08-01

WEB制作に役立つ便利ツール・ジェネレーターまとめ

2019-08-21