Q&A
情報量が多すぎ、もっとシンプルに必要なものだけ抽出して
例示してください
jQueryを使って、search-boxクラスにあるvalueとlist_itemクラスにあるdata型の値と連動した内容を絞り込み表示するプログラムを作成しています。
value値の文字数を増やすと部分一致でうまく作動してくれるのですが、数字で連動させようとすると絞り込みがうまく表示されません。
デバッグしてみたところ、以下のコードの部分で、if文がうまく作動しないです。
完全一致と部分一致について調べたのですがうまくいきませんでした。
何か良い方法はありましたらご教示ください。
追記：以下の部分で、searchData["1"]とitmeDataが同じなら0を返したいのですが、-1をかえしてしまうので0を返せるようにしたいです。
js
1 // 絞り込み対象かどうかを調べる 2 if (searchData.indexOf(itemData) === -1) { 3 //$(listItem).eq(j).addClass(hideClass); 4 $(listItem).eq(j).attr('disabled', true);
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" id="emp"> 39 <option value="">部署選択</option> 40 <option value="1">ITソリューション部</option> 41 <option value="2">事業管理部</option> 42 <option value="3">営業グループ</option> 43 </select> 44 </div> 45 46 <div class="form-group mb-2 ml-2 mr-5 list"> 47 <select class="chosen-select form-control list" name="emp"> 48 <option value="">氏名選択</option> 49 <option class="list_item" data-emp="1">山田(やまだ)</option> 50 <option class="list_item" data-emp="1">田中(たなか)</option> 51 <option class="list_item" data-emp="2">佐藤(さとう)</option> 52 <option class="list_item" data-emp="3">鈴木(すずき)</option> 53 <option class="list_item" data-emp="3">中田（なかた）</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 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 76 <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script> 77 <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"> 78 79 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 80 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 81 crossorigin="anonymous"></script> 82 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 83 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 84 crossorigin="anonymous"></script> 85 86 87 88 <script src="script.js"></script> 89 90 91</body> 92 93</html>
js
1$('.chosen-select').chosen({ 2 search_contains: true 3}); 4 5$(function () { 6 var searchBox = '.search-box'; // 絞り込む項目を選択するエリア 7 var listItem = '.list_item'; // 絞り込み対象のアイテム 8 var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名 9 $(function () { 10 // 絞り込み項目を変更した時 11 $(document).on('change', '.search-box select', function () { 12 search_filter(); 13 $('.chosen-select').trigger("chosen:updated"); // 追加 14 }); 15 }); 16 //リストの絞り込みを行う 17 function search_filter() { 18 // 非表示状態を解除 19 //$(listItem).removeClass(hideClass); 20 $(listItem).attr('disabled', false); 21 for (var i = 0; i < $('.search-box select').length; i++) { 22 var name = $('.search-box select').eq(i).attr('id'); 23 // 選択されている項目を取得 24 var searchData = get_selected_input_items(name); 25 // 選択されている項目がない、またはALLを選択している場合は飛ばす 26 if (searchData.length === 0 || searchData[0] === '') { 27 continue; 28 } 29 // リスト内の各アイテムをチェック 30 for (var j = 0; j < $(listItem).length; j++) { 31 // アイテムに設定している項目を取得 32 var itemData = $(listItem).eq(j).data(name); 33 // 絞り込み対象かどうかを調べる 34 if (searchData.indexOf(itemData) === -1) { 35 //$(listItem).eq(j).addClass(hideClass); 36 $(listItem).eq(j).attr('disabled', true); 37 } 38 } 39 } 40 } 41 //選択されているoptionのvalue属性の値 42 function get_selected_input_items(name) { 43 var searchData = []; 44 // $('[name=' + name + ']:checked').each(function() { 45 $('select[name=' + name + '] option:selected').each(function () { 46 searchData.push($('#emp option:selected').val()); 47 }); 48 return searchData; 49 } 50});
回答2件
0
比較する際にitemDataは数値、searchDataの値は文字列として取得されているため一致しないようですね。
javascript
1// 絞り込み対象かどうかを調べる 2if (searchData.indexOf(String(itemData)) === -1) { 3 //$(listItem).eq(j).addClass(hideClass); 4 $(listItem).eq(j).attr('disabled', true); 5}
これで事業管理部の選択項目によって氏名が絞り込まれます。
投稿2020/09/07 04:22
総合スコア2183
0
ベストアンサー
これでどうでしょうか？
JavaScript
1var itemData = $(listItem).eq(j).attr("data-" + name);
説明
jQueryのdataメソッドは自動で型変換されてしい数値型、searchDataのvalメソッドは文字列型配列となっているので一致しません。dataメソッドではなくattrで取得すると文字列型で取れるので一致します。
参考：https://havelog.ayumusato.com/develop/javascript/e291-jquery_data_method.html
投稿2020/09/07 04:20
総合スコア46
あなたの回答
tips
プレビュー
