【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でセレクトボックスの値に応じて要素の表示・非表示を切り替える方法のご紹介でした！