質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.82%

複数のセレクトボックスの選択内容でリストを絞り込み表示させたい。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 5,368

sean08

score 13

複数のセレクトボックスで選択した内容で、リストの絞り込みを行いたいです。

参考にしたのは下記ページです。
セレクトボックスで同様の絞り込みを実現させたいのですが、変更方法がよく分かっていません。
https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html

よろしくお願いいたします。

まず選択しているオプションのvalue値が取得できないです。
<form>
    <div class="filterBox">
        <div class="search-box">
            <span>生地厚み</span>
            <select name="oz">
                <option value="">すべて</option>
                <option value="4oz">~4オンス</option>
                <option value="4-6oz">4.1~6オンス</option>
                <option value="6-8oz">6.1~8オンス</option>
            </select>
        </div>
        <div class="search-box">
            <span>価格帯</span>
            <select name="yen">
                <option value="">すべて</option>
                <option value="99yen">~99円</option>
                <option value="100-199yen">100~199円</option>
                <option value="200-299yen">200~299円</option>
                <option value="300-399yen">300~399円</option>
                <option value="400-499yen">400~499円</option>
                <option value="500yen">500円以上</option>
            </select>
        </div>
        <div class="search-box">
            <span>形状</span>
            <select name="type">
                <option value="">すべて</option>
                <option value="flat">マチなし</option>
                <option value="ship-bottom">マチあり</option>
                <option value="other">その他</option>
            </select>
        </div>
    </div>
</form>

<ul class="list">
<li class="list_item" data-oz="4oz" data-yen="99yen" data-type="flat">
   <img src="aaa">
</li>
<li class="list_item" data-oz="4oz" data-yen="100-199yen" data-type="flat">
   <img src="bbb">
</li>
 ・
 ・
 ・
</ul>

<script>
var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
var listItem = '.list_item';   // 絞り込み対象のアイテム
var hideClass = 'is-hide';     // 絞り込み対象外の場合に付与されるclass名

$(function() {
    // 絞り込み項目を変更した時
    $(document).on('change', '.search-box select', function() {
        search_filter();
    });
});

//リストの絞り込みを行う
function search_filter() {
    // 非表示状態を解除
    $(listItem).removeClass(hideClass);
    for (var i = 0; i < $('.search-box select').length; i++) {
        var name = $('.search-box select').eq(i).attr('name');
        // 選択されている項目を取得
        var searchData = get_selected_input_items(name);
        // 選択されている項目がない、またはALLを選択している場合は飛ばす
        if(searchData.length === 0 || searchData[0] === '') {
            continue;
        }
        // リスト内の各アイテムをチェック
        for (var j = 0; j < $(listItem).length; j++) {
            // アイテムに設定している項目を取得
            var itemData = $(listItem).eq(j).data(name);
            // 絞り込み対象かどうかを調べる
            if(searchData.indexOf(itemData) === -1) {
                $(listItem).eq(j).addClass(hideClass);
            }
        }
    }
}

//選択されているoptionのvalue属性の値
function get_selected_input_items(name) {
    var searchData = [];
    $('[name=' + name + ']:checked').each(function() {
        searchData.push($('[name="name"] option:selected').val());
    });
    return searchData;
}        
</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

セレクトボックスなので、checkedではなくselectedでは?

function get_selected_input_items(name) {
    var searchData = [];
//    $('[name=' + name + ']:checked').each(function() {
    $('[name=' + name + '] option:selected').each(function() {
        searchData.push($('[name="name"] option:selected').val());
    });
    return searchData;
} 


検証ツールとはなんでしょうか?
こちらで試したところいけましたが?

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>TEST</title>
    <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
    <style>
        .is-hide {
            display: none;
        }
    </style>
</head>
<body>
    <form>
        <div class="filterBox">
            <div class="search-box">
                <span>生地厚み</span>
                <select name="oz">
                    <option value="">すべて</option>
                    <option value="4oz">~4オンス</option>
                    <option value="4-6oz">4.1~6オンス</option>
                    <option value="6-8oz">6.1~8オンス</option>
                </select>
            </div>
            <div class="search-box">
                <span>価格帯</span>
                <select name="yen">
                    <option value="">すべて</option>
                    <option value="99yen">~99円</option>
                    <option value="100-199yen">100~199円</option>
                    <option value="200-299yen">200~299円</option>
                    <option value="300-399yen">300~399円</option>
                    <option value="400-499yen">400~499円</option>
                    <option value="500yen">500円以上</option>
                </select>
            </div>
            <div class="search-box">
                <span>形状</span>
                <select name="type">
                    <option value="">すべて</option>
                    <option value="flat">マチなし</option>
                    <option value="ship-bottom">マチあり</option>
                    <option value="other">その他</option>
                </select>
            </div>
        </div>
    </form>
    <ul class="list">
        <li class="list_item" data-oz="4oz" data-yen="99yen" data-type="flat">
            <p>1111</p>
        </li>
        <li class="list_item" data-oz="4-6oz" data-yen="100-199yen" data-type="flat">
            <p>222</p>
        </li>
    </ul>
    <script>
        $(function() {
            var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
            var listItem = '.list_item';   // 絞り込み対象のアイテム
            var hideClass = 'is-hide';     // 絞り込み対象外の場合に付与されるclass名
            $(function() {
                // 絞り込み項目を変更した時
                $(document).on('change', '.search-box select', function() {
                    search_filter();
                });
            });
            //リストの絞り込みを行う
            function search_filter() {
                // 非表示状態を解除
                $(listItem).removeClass(hideClass);
                for (var i = 0; i < $('.search-box select').length; i++) {
                    var name = $('.search-box select').eq(i).attr('name');
                    // 選択されている項目を取得
                    var searchData = get_selected_input_items(name);
                    // 選択されている項目がない、またはALLを選択している場合は飛ばす
                    if(searchData.length === 0 || searchData[0] === '') {
                        continue;
                    }
                    // リスト内の各アイテムをチェック
                    for (var j = 0; j < $(listItem).length; j++) {
                        // アイテムに設定している項目を取得
                        var itemData = $(listItem).eq(j).data(name);
                        // 絞り込み対象かどうかを調べる
                        if(searchData.indexOf(itemData) === -1) {
                            $(listItem).eq(j).addClass(hideClass);
                        }
                    }
                }
            }
            //選択されているoptionのvalue属性の値
            function get_selected_input_items(name) {
                var searchData = [];
                // $('[name=' + name + ']:checked').each(function() {
                $('select[name=' + name + '] option:selected').each(function() {
                    searchData.push($('select[name=' + name + '] option:selected').val());
                });
                return searchData;
            }
        });
    </script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/24 17:46

    回答ありがとうございます。

    該当部分を修正し、検証ツールで確認したところ、
    <修正前>
    searchData = []

    <修正後>
    searchData = [undefind]

    となり、どの選択でも全アイテムが非表示になってしまいました。

    キャンセル

  • 2018/10/24 18:53

    検証ツール→クロームでのデバッグです。
    すみません、変な表現をしてしまいまして。。。

    select[name=' + name + ']の、selectを追加して無事、絞り込みできました!

    ありがとうございました!!

    キャンセル

  • 2018/10/24 19:38

    あっ、最初の回答は「select」抜けてましたね。(*_ _)人ゴメンナサイ

    キャンセル

  • 2018/10/24 20:44

    いえいえ。本当にありがとうございました!!

    キャンセル

+1

「セレクトボックスの選択された値を取得する」だけなら
changeイベントが発火した時の$(this).val()を取ってくるだけじゃダメですかね…?

追記
changeイベントが発火した時にそれぞれのセレクトボックスの選択されている項目のvalueを取得し、
それらが条件に合致すれば~のように組み替えて見るのはいかがでしょう。

これを

$(function() {
    // 絞り込み項目を変更した時
    $(document).on('change', '.search-box select', function() {
        search_filter();
    });
});

こうして

$(function() {
    // 絞り込み項目を変更した時
    $(document).on('change', '.search-box select', function() {
        var selected_oz = $("*[name=oz] option:selected").val();
        var selected_yen = $("*[name=yen] option:selected").val();
        var selected_type = $("*[name=type] option:selected").val();
        //ここに上記の値によって表示するlist-itemを切り替える処理
    });
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/24 16:05

    回答ありがとうございます。

    補足させていただきます。
    選択しているオプションのvalue値が取得できないというのは、コードのこの部分になります。
    //選択されているoptionのvalue属性の値
    function get_selected_input_items(name) {
    var searchData = [];
    $('[name=' + name + ']:checked').each(function() {
    searchData.push($('[name="name"] option:selected').val()); ←この部分
    });
    return searchData;
    }

    先ほどは、
    $('[name="name"] option:selected').val()

    $(this).val()
    に変更してみましたが、取得できませんでした。


    そして、
    $(function() {
    // 絞り込み項目を変更した時
    $(document).on('change', '.search-box select', function() {
    console.log($(this).val());
    search_filter();
    });
    });
    に変更してみましたが、検証ツールで確認すると
    値が何も表示されませんでした。。。

    キャンセル

  • 2018/10/24 16:15

    >検証ツールで確認すると値が何も表示されませんでした。。。
    https://jsfiddle.net/madoka9393/ex5b9u6j/
    当方では確認できない(値が表示されます)ですね…。

    キャンセル

  • 2018/10/24 17:47

    「追記」確認しました。
    ありがとうございます。

    実現させたいことが後出しになってしまいますが、
    selectボックスの内容が何種類もあります。
    かつ、同一ページで使用するセレクトボックスの内容がページによって変動します。
    絞り込みのプログラムは、全ての組み合わせ使用できるものにしたいのです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.82%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る