JavaScriptで表示切替プルダウンをするんじゃ！

どうもです。

今日は、”プルダウンで切替を行いたい！”

という方のための記事となっております。

見本は以下サイトのようになっております。

れのるーむ

押すと、

切り替わる的な

コード

以下、コードとなります。

HTML:

<p><select class="extraction">
<option value="全て">全て</option>
<option value="東京">公式</option>
<option value="大阪">個人PV</option>
</select></p>

<div class="tokyo"></div>
<div class="tokyo"></div>
<div class="tokyo"></div>

JavaScript:

$('select').change(function () {
 var val = $('select option:selected').val();
 if (val == 'select') return;
 $('section').fadeOut();
 $('section#' + val ).fadeIn();
});

$(".extraction").change(function() {
   var extraction_val = $(".extraction").val();
   if(extraction_val == "全て") {
       $('.tokyo').css('display', 'block');
       $('.osaka').css('display', 'block');
   }else if(extraction_val == "東京") {
       $('.tokyo').css('display', 'block');
       $('.osaka').css('display', 'none');
   }else if(extraction_val == "大阪") {
       $('.tokyo').css('display', 'none');
       $('.osaka').css('display', 'block');
	}
});

かんたん！

JS側の'block'と'none'で表示を切り分けています

複数の切替をしたい方は、else if(){}を増やしていただければ簡単に増やせます。きっと上級者の方はもっといい方法があるのでしょうが。

wordpressを使っている方も、JavaScript.jsファイルに記載いただければ簡単に実装することができます。

プルダウンがダサいという方はcss等でおしゃれにしていただけますと幸いです。以下、参考になるかと思います。

https://kodocode.net/design-css-selectlist/

以上！JSで表示切替をするんじゃ！でした。

ではでは。