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

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

ただいまの
回答率

87.79%

chosen.jsライブラリを使ったセレクトボックスの絞り込みを複数使う方法。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 590

解決した内容は、二つchosenライブラリを使ったセレクトボックスの絞り込みを可能にすることです。
現在、chosen.jsのライブラリを使ったセレクトボックスを一つは実装したのですが、
同じ内容を複数使うと両方とも機能しなくなるという原因が解決できない状態です。
2つ目の方のセレクトボックスのidとnameが違うので片方は起動すると思ったのですが、両方とも起動しませんでした。
わかる人がいましたらご教示お願いします。

<!DOCTYPE html>
<html lang="ja" class="nanikore" xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!--Font Awesome5-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <link rel="stylesheet" href="../css/stylesheet.css">

    <link rel="stylesheet" href="../css/chosen-css.css">

</head>

<body class="nanikore">

    <div class="container h-100">

        <div class="row align-items-center h-100">
            <div class="col-6 mx-auto">
                <div class="jumbotron text-center" style="background-color: #5ca580;">
                    <div class="text-center">

                        <h2 class="mb-5"><i class="fas fa-users"></i>担当者を選択してください</h2>
                        <form action="" class="form-inline justify-content-center">

                            <div class="form-inline">

                                <div class="search-box form-group mb-2 ml-2">
                                    <select class="chosen-select form-control" id="visitor_id">
                                        <option value="" style="font-weight: 100;">部署選択</option>
                                        <option value="itsol">ITソリューション部</option>
                                        <option value="jigyou">事業管理部</option>
                                        <option value="eigyou">営業グループ</option>
                                    </select>
                                </div>

                                <div class="form-group mb-2 ml-2 mr-5">
                                    <select class="chosen-select form-control list" name="visitor_id">
                                        <option value="">氏名選択</option>
                                        <option class="list_item" data-visitor_id="itsol">山田(やまだ)</option>
                                        <option class="list_item" data-visitor_id="itsol">田中(たなか)</option>
                                        <option class="list_item" data-visitor_id="jigyou">佐藤(さとう)</option>
                                        <option class="list_item" data-visitor_id="jigyou">鈴木(すずき)</option>
                                        <option class="list_item" data-visitor_id="eigyou">中田(なかた)</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-inline">

                                <div class="search-box form-group mb-2 ml-2">
                                    <select class="chosen-select form-control" id="exiter_id">
                                        <option value="" style="font-weight: 100;">部署選択</option>
                                        <option value="itsol">ITソリューション部</option>
                                        <option value="jigyou">事業管理部</option>
                                        <option value="eigyou">営業グループ</option>
                                    </select>
                                </div>

                                <div class="form-group mb-2 ml-2 mr-5">
                                    <select class="chosen-select form-control list" name="exiter_id">
                                        <option value="">氏名選択</option>
                                        <option class="list_item" data-exiter_id="itsol">山田(やまだ)</option>
                                        <option class="list_item" data-exiter_id="itsol">田中(たなか)</option>
                                        <option class="list_item" data-exiter_id="jigyou">佐藤(さとう)</option>
                                        <option class="list_item" data-exiter_id="jigyou">鈴木(すずき)</option>
                                        <option class="list_item" data-exiter_id="eigyou">中田(なかた)</option>
                                    </select>
                                </div>
                            </div>



                            <div class="ml-1 mt-5">
                                <button type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#tabModal">入力完了
                                </button>

                                <!-- Modal -->
                                <div class="modal fade" id="tabModal" tabindex="-1" role="dialog"
                                    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalCenterTitle">担当者確認画面</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <p>こちらの担当者であっていますか?</p>
                                                メールアドレス:
                                                <p id="mail-mail"></p>
                                                担当者名:
                                                <p id="name-name"></p>
                                            </div>
                                            <div class="modal-footer">
                                                <a href="" type="button" class="btn btn-secondary"
                                                    data-dismiss="modal">キャンセル</a>
                                                <button type="submit" class="btn btn-primary">OK</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>



                        </form>

                    </div>

                </div>
            </div>
        </div>


    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet">

    <script src="../js/stylesheet.js">
    </script>


</body>

</html>
//chosen
$('.chosen-select').chosen({
    search_contains: true
});

$(function () {
    var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
    var listItem = '.list_item';   // 絞り込み対象のアイテム
    var hideClass = 'is-hide';     // 絞り込み対象外の場合に付与されるclass名
    $(function () {
        // 絞り込み項目を変更した時
        $(document).on('change', '.search-box select', function () {
            search_filter();
            $('.chosen-select').trigger("chosen:updated"); // 追加
        });
    });
    //リストの絞り込みを行う
    function search_filter() {
        // 非表示状態を解除
        // $(listItem).removeClass(hideClass);
        $(listItem).attr('disabled', false);
        for (var i = 0; i < $('.search-box select').length; i++) {
            var name = $('.search-box select').eq(i).attr('id');
            // 選択されている項目を取得
            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);
                    $(listItem).eq(j).attr('disabled', true);
                }
            }
        }
    }
    //選択されているoptionのvalue属性の値
    function get_selected_input_items(name) {
        var searchData = [];
        // $('[name=' + name + ']:checked').each(function() {
        $('select[name=' + name + '] option:selected').each(function () {
            searchData.push($('#visitor_id option:selected').val());
        });
        return searchData;
    }
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

こちらでテストしたときの状態そのままです。
(この後stylesheet.jsに内容を移して再度確認しています)

<!DOCTYPE html>
<html lang="ja" class="nanikore" xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!--Font Awesome5-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <link rel="stylesheet" href="../css/stylesheet.css">

    <link rel="stylesheet" href="../css/chosen-css.css">

</head>

<body class="nanikore">

    <div class="container h-100">

        <div class="row align-items-center h-100">
            <div class="col-6 mx-auto">
                <div class="jumbotron text-center" style="background-color: #5ca580;">
                    <div class="text-center">

                        <h2 class="mb-5"><i class="fas fa-users"></i>担当者を選択してください</h2>
                        <form action="" class="form-inline justify-content-center">

                            <div class="form-inline">

                                <div class="search-box form-group mb-2 ml-2">
                                    <select class="chosen-select form-control" id="visitor_id">
                                        <option value="" style="font-weight: 100;">部署選択</option>
                                        <option value="itsol">ITソリューション部</option>
                                        <option value="jigyou">事業管理部</option>
                                        <option value="eigyou">営業グループ</option>
                                    </select>
                                </div>

                                <div class="form-group mb-2 ml-2 mr-5">
                                    <select class="chosen-select form-control list" name="visitor_id">
                                        <option value="">氏名選択</option>
                                        <option class="list_item" data-visitor_id="itsol">山田(やまだ)</option>
                                        <option class="list_item" data-visitor_id="itsol">田中(たなか)</option>
                                        <option class="list_item" data-visitor_id="jigyou">佐藤(さとう)</option>
                                        <option class="list_item" data-visitor_id="jigyou">鈴木(すずき)</option>
                                        <option class="list_item" data-visitor_id="eigyou">中田(なかた)</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-inline">

                                <div class="search-box form-group mb-2 ml-2">
                                    <select class="chosen-select form-control" id="exiter_id">
                                        <option value="" style="font-weight: 100;">部署選択</option>
                                        <option value="itsol">ITソリューション部</option>
                                        <option value="jigyou">事業管理部</option>
                                        <option value="eigyou">営業グループ</option>
                                    </select>
                                </div>

                                <div class="form-group mb-2 ml-2 mr-5">
                                    <select class="chosen-select form-control list" name="exiter_id">
                                        <option value="">氏名選択</option>
                                        <option class="list_item" data-exiter_id="itsol">山田(やまだ)</option>
                                        <option class="list_item" data-exiter_id="itsol">田中(たなか)</option>
                                        <option class="list_item" data-exiter_id="jigyou">佐藤(さとう)</option>
                                        <option class="list_item" data-exiter_id="jigyou">鈴木(すずき)</option>
                                        <option class="list_item" data-exiter_id="eigyou">中田(なかた)</option>
                                    </select>
                                </div>
                            </div>



                            <div class="ml-1 mt-5">
                                <button type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#tabModal">入力完了
                                </button>

                                <!-- Modal -->
                                <div class="modal fade" id="tabModal" tabindex="-1" role="dialog"
                                    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalCenterTitle">担当者確認画面</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <p>こちらの担当者であっていますか?</p>
                                                メールアドレス:
                                                <p id="mail-mail"></p>
                                                担当者名:
                                                <p id="name-name"></p>
                                            </div>
                                            <div class="modal-footer">
                                                <a href="" type="button" class="btn btn-secondary"
                                                    data-dismiss="modal">キャンセル</a>
                                                <button type="submit" class="btn btn-primary">OK</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>



                        </form>

                    </div>

                </div>
            </div>
        </div>


    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet">

    <script>
//chosen
$('.chosen-select').chosen({
    search_contains: true
});

$(function () {
    var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
    var listItem = '.list_item';   // 絞り込み対象のアイテム
    var hideClass = 'is-hide';     // 絞り込み対象外の場合に付与されるclass名
    $(function () {
        // 絞り込み項目を変更した時
        $(document).on('change', '.search-box select', function () {
            search_filter(this);
            $('.chosen-select').trigger("chosen:updated"); // 追加
        });
    });
    //リストの絞り込みを行う
    function search_filter(e) {
        // 非表示状態を解除
        // $(listItem).removeClass(hideClass);
        $(e,listItem).attr('disabled', false);
        for (var i = 0; i < $(e,'.search-box select').length; i++) {
            var name = $(e,'.search-box select').eq(i).attr('id');
            // 選択されている項目を取得
            var searchData = get_selected_input_items(e,name);
            // 選択されている項目がない、またはALLを選択している場合は飛ばす
            if (searchData.length === 0 || searchData[0] === '') {
                continue;
            }
            // リスト内の各アイテムをチェック
            for (var j = 0; j < $('select[name="'+ e.id +'"] ' + listItem).length; j++) {
                // アイテムに設定している項目を取得
                var itemData = $('select[name="'+ e.id +'"] ' + listItem).eq(j).data(name);
                // 絞り込み対象かどうかを調べる
                if (searchData.indexOf(itemData) === -1) {
                    //$(listItem).eq(j).addClass(hideClass);
                    $('select[name="'+ e.id +'"] ' + listItem).eq(j).attr('disabled', true);
                }else{
                    $('select[name="'+ e.id +'"] ' + listItem).eq(j).attr('disabled', false);
                }
            }
        }
    }
    //選択されているoptionのvalue属性の値
    function get_selected_input_items(e,name) {
        var searchData = [];
        // $('[name=' + name + ']:checked').each(function() {
        $(e,'select[name=' + name + '] option:selected').each(function () {
            searchData.push($(e,'#visitor_id option:selected').val());
        });
        return searchData;
    }
});
    </script>

</body>

</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

質問者様
nameとIdの使い方分けたほうが良いですよ
今回なら
Id="visitor_id1" 
Id="employee_id1" 
Id="visitor_id2" 
Id="employee_id2" 
とか間違いの元となりますよ。
(今回はあえて修正していません)

結局クラス指定しかしないので「どちらの社員に対してフィルタを行えばよいか」が不明の状態でした
よってsearch_filterに引数を追加してどちらの処理か判るようにしてあります。
基本の処理自体はほぼ変更ありません。ただ「どちら」の指定を追加しただけです。

//chosen
$('.chosen-select').chosen({
    search_contains: true
});

$(function () {
    var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
    var listItem = '.list_item';   // 絞り込み対象のアイテム
    var hideClass = 'is-hide';     // 絞り込み対象外の場合に付与されるclass名
    $(function () {
        // 絞り込み項目を変更した時
        $(document).on('change', '.search-box select', function () {
            search_filter(this);
            $('.chosen-select').trigger("chosen:updated"); // 追加
        });
    });
    //リストの絞り込みを行う
    function search_filter(e) {
        // 非表示状態を解除
        // $(listItem).removeClass(hideClass);
        $(e,listItem).attr('disabled', false);
        for (var i = 0; i < $(e,'.search-box select').length; i++) {
            var name = $(e,'.search-box select').eq(i).attr('id');
            // 選択されている項目を取得
            var searchData = get_selected_input_items(e,name);
            // 選択されている項目がない、またはALLを選択している場合は飛ばす
            if (searchData.length === 0 || searchData[0] === '') {
                continue;
            }
            // リスト内の各アイテムをチェック
            for (var j = 0; j < $('select[name="'+ e.id +'"] ' + listItem).length; j++) {
                // アイテムに設定している項目を取得
                var itemData = $('select[name="'+ e.id +'"] ' + listItem).eq(j).data(name);
                // 絞り込み対象かどうかを調べる
                if (searchData.indexOf(itemData) === -1) {
                    //$(listItem).eq(j).addClass(hideClass);
                    $('select[name="'+ e.id +'"] ' + listItem).eq(j).attr('disabled', true);
                }else{
                    $('select[name="'+ e.id +'"] ' + listItem).eq(j).attr('disabled', false);
                }
            }
        }
    }
    //選択されているoptionのvalue属性の値
    function get_selected_input_items(e,name) {
        var searchData = [];
        // $('[name=' + name + ']:checked').each(function() {
        $(e,'select[name=' + name + '] option:selected').each(function () {
            searchData.push($(e,'#visitor_id option:selected').val());
        });
        return searchData;
    }
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/10/12 09:56

    返信が遅れて申し訳ありません。
    htmlを変更せずに、JSの部分だけ変更するとどちらも絞り込みができない状態になってしまいます。
    これは、chosen-selectクラスが複数あると機能しないということなのでしょうか?

    キャンセル

  • 2020/10/12 11:39

    まず再度今回質問者様が質問公開されているHTMLをコピー
    <script src="../js/stylesheet.js"></script>
    '(stylesheet.jsという名称は適切ではないようい思いますが...)
    この内容がjavascriptのコード部分として認識しそこに今回の回答の内容を埋め込み再テストをおこまいました。
    動作確認しましたが正常に作動する事を確認しました。

    キャンセル

  • 2020/10/12 12:06

    回答ありがとうございます。
    動作確認までしていただいてありがとうございます。
    回答者様の貼り付けていただいたコードで動作確認がとれました。
    長い間回答してくださってありがとうございます。

    キャンセル

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

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

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