【JavaScript】セレクトボックスの値に応じて要素の表示・非表示を切り替える

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでセレクトボックスの値に応じて要素の表示・非表示を切り替える方法をご紹介しています。お知らせ一覧等でページャーを実装していない場合に便利です。

セレクトボックスから選択した項目に該当する要素だけを表示したいな。良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

本記事でやりたいこと

セレクトボックスから選択した値に応じて、要素の表示・非表示を切り替えることです。例えば、セレクトボックスから2022年を選択すると、2022年のテキストを持つ要素だけを表示し、他の要素を非表示にするといったものです。

説明だけではわかりにくいですよね…。下記にデモをご用意しました。実際に操作して動作をご確認いただければと思います。セレクトボックスから年を選択すると、年に該当する要素だけが表示されるようになっています。

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

上記例ではセレクトボックスから選択した年数に応じて表示する要素を切り替えていますが、カテゴリー名や指定したテキストを含む要素等、条件を変更することで応用が利く内容となっています。

セレクトボックスの値に応じて要素の表示・非表示を切り替える

前項のデモで使用しているソースをご紹介します。JavaScriptにコメントを記載していますので、カスタマイズの際に参考にしていただければ幸いです!

HTML

<select>
    <option value="">年を選択</option>
    <option value="2022">2022年</option>
    <option value="2021">2021年</option>
    <option value="2020">2020年</option>
    <option value="2019">2019年</option>
    <option value="2018">2018年</option>
</select>

<ul>
    <li>
        <time>2022年01月01日</time>
        <a href="#" target="_blank">ダミーテキスト</a>
    </li>
    <li>
        <time>2022年01月01日</time>
        <a href="#" target="_blank">ダミーテキスト</a>
    </li>
    <li>
        <time>2021年01月01日</time>
        <a href="#" target="_blank">ダミーテキスト</a>
    </li>
    <li>
        <time>2021年01月01日</time>
        <a href="#" target="_blank">ダミーテキスト</a>
    </li>
    <li>
        <time>2021年01月01日</time>
        <a href="#" target="_blank">ダミーテキスト</a>
    </li>
    <li>
        <time>2020年01月01日</time>
        <a href="#" target="_blank">ダミーテキスト</a>
    </li>
    <li>
        <time>2020年01月01日</time>
        <a href="#" target="_blank">ダミーテキスト</a>
    </li>
    <li>
        <time>2019年01月01日</time>
        <a href="#" target="_blank">ダミーテキスト</a>
    </li>
    <li>
        <time>2019年01月01日</time>
        <a href="#" target="_blank">ダミーテキスト</a>
    </li>
    <li>
        <time>2019年01月01日</time>
        <a href="#" target="_blank">ダミーテキスト</a>
    </li>
    <li>
        <time>2018年01月01日</time>
        <a href="#">ダミーテキスト</a>
    </li>
    <li>
        <time>2018年01月01日</time>
        <a href="#">ダミーテキスト</a>
    </li>
</ul>

JavaScript

window.onload = () => {
    
    //セレクトボックスを取得する
    const select = document.querySelector('select');
    //リストを取得する
    const list = document.querySelector('ul');
    //リストアイテムを取得する
    const listItems = list.children;
    
    //関数定義
    const toggle = (value, items) => {
        
        //引数のリストアイテムを繰り返し処理する
        for (let item of items) {
            
            //リストアイテムを表示状態にする
            item.style.display = 'block';

            //リストアイテムが持つtime要素から日付を取得する
            let date = item.querySelector('time').textContent;
            //日付から西暦を取得//リストアイテムを表示
            let year = date.slice(0, 4);
            
            //valueが空ではないかつyearと一致しなければ
            if (value !== '' && value !== year) {
                //リストアイテムを非表示にする
                item.style.display = 'none';
            }
        }
    };

    //セレクトボックスの変更でイベント発火
    select.addEventListener('change', ()=>{
        //関数実行
        toggle(event.target.value, listItems);
    }, false);
};

これでセレクトボックスの値に応じて要素の表示・非表示を切り替えることができます。

最後に

本記事の内容を以前投稿したような気がして過去の投稿を遡ってみたのですが、いくつかの投稿の文章がひどすぎて目も当てられない状況でした。どこかできっちり時間をとってリライトしないといけないのはわかっていますが、如何せん前ばかり見てしまう性格で…。ただ今回ばかりはそんなことも言っていられません。いつも閲覧してくださっている方により良いコンテンツをお届けするため、年内のどこかで1ヵ月程時間をとってリライトに勤しみたいと思います!がんばります!

以上、JavaScriptでセレクトボックスの値に応じて要素の表示・非表示を切り替える方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら