selectタグを使ったドロップダウン形式の内容を二つ使って、絞り込み選択をしてchosenライブラリと組み合わせたい

具体的には、部署と社員名の二つのドロップダウンリストを用意して、
部署を選択したら、その部署に所属している社員のみをもう一つのselect内に表示させるようにしたいです。

現在の状況：部署を選択してその部署に所属している社員の絞り込みはできたのだが、それをchosenプラグインと組み合わせることができないです。

sampleの形をchosenライブラリと組み合わせたいと考えています。
利用環境は、Bootstrap4, jQuery.min.js, jqueryのchosenプラグインです。

何卒よろしくお願いします。

参考にしたサイト：https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html
：https://teratail.com/questions/153952

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
9        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10    <style>
11        body,
12        html {
13            height: 100%;
14            background-color: #fdfdfd;
15        }
16
17        .is-hide {
18            display: none;
19        }
20    </style>
21</head>
22
23<body>
24    <div class="container h-100">
25
26        <div class="row align-items-center h-100">
27            <div class="col-6 mx-auto">
28                <div class="jumbotron text-center" style="background-color: #5ca580;">
29                    <div class="text-center">
30
31                        <h2 class="mb-5">ようこそ</h2>
32                        <h2>担当者を選択してください</h2>
33                        <form action="" class="form-inline justify-content-center">
34
35                            <div class="form-inline">
36
37                                <div class="search-box form-group mb-2 ml-2">
38                                    <select class="chosen-select form-control" name="department">
39                                        <option value="">部署選択</option>
40                                        <option value="itsol">ITソリューション部</option>
41                                        <option value="jigyou">事業管理部</option>
42                                        <option value="eigyou">営業グループ</option>
43                                    </select>
44                                </div>
45
46                                <div class="form-group mb-2 ml-2 mr-5">
47                                    <select class="chosen-select form-control list" name="department">
48                                        <option value="">氏名選択</option>
49                                        <option class="list_item" data-department="itsol">山田(やまだ)</option>
50                                        <option class="list_item" data-department="itsol">田中(たなか)</option>
51                                        <option class="list_item" data-department="jigyou">佐藤(さとう)</option>
52                                        <option class="list_item" data-department="jigyou">鈴木(すずき)</option>
53                                        <option class="list_item" data-department="eigyou">中田（なかた）</option>
54                                    </select>
55                                </div>
56                            </div>
57
58                            <div class="ml-2">
59                                <a class="btn btn-primary" href="visitor-form.html" role="button">入力完了</a>
60                            </div>
61                        </form>
62
63                    </div>
64
65                </div>
66            </div>
67        </div>
68
69
70    </div>
71
72
73
74
75
76
77
78    </div>
79
80
81
82
83
84
85    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
86        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
87        crossorigin="anonymous"></script>
88    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
89        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
90        crossorigin="anonymous"></script>
91
92    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
93    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
94    <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet">
95
96    <script>
97
98    </script>
99
100    <script>
101        $('.chosen-select').chosen({
102            search_contains: true
103        });
104
105        $(function () {
106            var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
107            var listItem = '.list_item';   // 絞り込み対象のアイテム
108            var hideClass = 'is-hide';     // 絞り込み対象外の場合に付与されるclass名
109            $(function () {
110                // 絞り込み項目を変更した時
111                $(document).on('change', '.search-box select', function () {
112                    search_filter();
113                });
114            });
115            //リストの絞り込みを行う
116            function search_filter() {
117                // 非表示状態を解除
118                $(listItem).removeClass(hideClass);
119                for (var i = 0; i < $('.search-box select').length; i++) {
120                    var name = $('.search-box select').eq(i).attr('name');
121                    // 選択されている項目を取得
122                    var searchData = get_selected_input_items(name);
123                    // 選択されている項目がない、またはALLを選択している場合は飛ばす
124                    if (searchData.length === 0 || searchData[0] === '') {
125                        continue;
126                    }
127                    // リスト内の各アイテムをチェック
128                    for (var j = 0; j < $(listItem).length; j++) {
129                        // アイテムに設定している項目を取得
130                        var itemData = $(listItem).eq(j).data(name);
131                        // 絞り込み対象かどうかを調べる
132                        if (searchData.indexOf(itemData) === -1) {
133                            $(listItem).eq(j).addClass(hideClass);
134                        }
135                    }
136                }
137            }
138            //選択されているoptionのvalue属性の値
139            function get_selected_input_items(name) {
140                var searchData = [];
141                // $('[name=' + name + ']:checked').each(function() {
142                $('select[name=' + name + '] option:selected').each(function () {
143                    searchData.push($('select[name=' + name + '] option:selected').val());
144                });
145                return searchData;
146            }
147        });
148    </script>
149
150
151</body>
152
153</html>

絞り込みでのselectサンプル

html
1<!doctype html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7    <title>TEST</title>
8    <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
9    <style>
10        .is-hide {
11            display: none;
12        }
13    </style>
14</head>
15
16<body>
17    <form>
18        <div class="filterBox">
19            <div class="search-box">
20                <span>部署</span>
21                <select name="department">
22                    <option value="">すべて</option>
23                    <option value="itsol">ITソリューション部</option>
24                    <option value="4-6oz">事業管理部</option>
25                    <option value="6-8oz">営業部</option>
26                </select>
27            </div>
28        </div>
29    </form>
30
31    <div class="list">
32        <span>部署</span>
33        <select name="department">
34            <option>選択してください</option>
35            <option class="list_item" data-department="itsol">山田</option>
36            <option class="list_item" data-department="4-6oz">田中</option>
37            <option class="list_item" data-department="itsol">佐藤</option>
38            <option class="list_item" data-department="4-6oz">鈴木</option>
39        </select>
40    </div>
41
42
43
44    <script>
45        $(function () {
46            var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
47            var listItem = '.list_item';   // 絞り込み対象のアイテム
48            var hideClass = 'is-hide';     // 絞り込み対象外の場合に付与されるclass名
49            $(function () {
50                // 絞り込み項目を変更した時
51                $(document).on('change', '.search-box select', function () {
52                    search_filter();
53                });
54            });
55            //リストの絞り込みを行う
56            function search_filter() {
57                // 非表示状態を解除
58                $(listItem).removeClass(hideClass);
59                for (var i = 0; i < $('.search-box select').length; i++) {
60                    var name = $('.search-box select').eq(i).attr('name');
61                    // 選択されている項目を取得
62                    var searchData = get_selected_input_items(name);
63                    // 選択されている項目がない、またはALLを選択している場合は飛ばす
64                    if (searchData.length === 0 || searchData[0] === '') {
65                        continue;
66                    }
67                    // リスト内の各アイテムをチェック
68                    for (var j = 0; j < $(listItem).length; j++) {
69                        // アイテムに設定している項目を取得
70                        var itemData = $(listItem).eq(j).data(name);
71                        // 絞り込み対象かどうかを調べる
72                        if (searchData.indexOf(itemData) === -1) {
73                            $(listItem).eq(j).addClass(hideClass);
74                        }
75                    }
76                }
77            }
78            //選択されているoptionのvalue属性の値
79            function get_selected_input_items(name) {
80                var searchData = [];
81                // $('[name=' + name + ']:checked').each(function() {
82                $('select[name=' + name + '] option:selected').each(function () {
83                    searchData.push($('select[name=' + name + '] option:selected').val());
84                });
85                return searchData;
86            }
87        });
88    </script>
89</body>
90
91</html>

行動規範の内容に同意します

回答1件

ベストアンサー

chosenのドキュメント（これでいいのですよね？）を見たところ、

Updating Chosen Dynamically

Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes

という項がありましたので、こちらを利用してはいかがでしょうか。

js
1//...
2
3                $(document).on('change', '.search-box select', function () {
4                    search_filter();
5                    $('.chosen-select').trigger("chosen:updated"); // 追加
6                });

なお、display:noneでは選択できない項目として認識していないようでしたので、disabled属性を用いないといけないようです。

js
1
2//...
3
4            //リストの絞り込みを行う
5            function search_filter() {
6                // 非表示状態を解除
7//                $(listItem).removeClass(hideClass);
8                $(listItem).attr('disabled',false);
9                for (var i = 0; i < $('.search-box select').length; i++) {
10
11//...
12
13//                            $(listItem).eq(j).addClass(hideClass);
14                            $(listItem).eq(j).attr('disabled',true);
15                        }
16                    }
17                }
18            }