option valueに複数の値を入れ、絞り込み検索できるようにしたい

実現したいこと

js・jqueryによる絞り込みを行う際に、
<select>内のoption valueに複数の値を入れ、
どちらかの値に一致していれば、
表示するようにしたいです。

発生している問題・エラーメッセージ

エラーは特に出ておりません。

該当のソースコード

html
1<html lang="ja">
2<head>
3<title>HTML, CSS and JavaScript demo</title>
4<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
5<link rel="stylesheet" type="text/css" href="test.css">
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
7<script type="text/javascript" src="function.js"></script>
8
9</head>
10<body>
11<div class="serchBox">
12  <select name="region">
13    <option value="">地域を選択</option>
14    <option value="matudo,all">松戸市</option>
15    <option value="chiba">千葉市</option>
16    <option value="katuura">勝浦市</option>
17    <option value="abiko">我孫子市</option>
18    <option value="okashiwa">柏市</option>
19  </select>
20  <button id="search">検索</button>
21  <button id="reset">リセット</button>
22</div>
23
24<div class="list" data-tiiki='["all"]'>松戸市
25</div>
26  <div class="list" data-tiiki='["matudo"]'>松戸市
27</div>
28</body>
29</html>

jquery
1$(function() {
2    var lists = $('.list');
3    $(document).on('click', 'button', function() {  filter_list();
4    });
5
6    // リセットボタンをクリックしたときの処理
7    $('#reset').on('click', function() {
8        // フォームのselectとcheckboxをリセット
9        $('.serchBox select').val('');
10        // リストの絞り込みをリセット
11        filter_list();
12    });
13      function filter_list() {
14        lists.show();
15        for (var i = 0; i < $('.serchBox select').length; i++) {
16            // 絞り込みの項目を取得
17            var item = $('.serchBox select').eq(i).attr('name');
18            // 絞り込みの対象を取得
19            var target = $('.serchBox select').eq(i).val();
20
21            if(target != '') {
22                for (var j = 0; j < lists.length; j++) {
23                    // 絞り込み対象でない場合は非表示
24                    if(lists.eq(j).data('tiiki').indexOf(target) === -1) {
25                     lists.eq(j).hide();
26                                        }
27                };
28            }
29        };
30      }
31    });
32

試したこと

<option value="matudo">松戸市</option> 上記のソースコードを <option value="matudo,all">松戸市</option> という形で、,で区切って、2つの値を入れ、

jsで絞りこみをしたときに、

<div class="list" data-tiiki='["all"]'>松戸市 </div> <div class="list" data-tiiki='["matudo"]'>松戸市 </div> 上記2つどちらとも表示されるようにならないか試してみましたが、うまくいきませんでした。

何卒宜しくお願い致します。

m.ts10806

2019/05/21 08:44

タグにjQueryを追加しておいてください。

satoru225Simple

2019/05/21 08:49

失礼いたしました。追加させていただきました！

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

回答2件

ベストアンサー

javascript
1<script>
2$(function(){
3  $('[name=region]').on('change',function(){
4    var vals=$(this).val().split(",");
5    $('.list').hide().filter(function(){
6      return $(this).data("tiiki").some(function(x){
7        return vals.indexOf(x)>-1;
8      });
9    }).show();
10  }).trigger('change');
11});
12</script>
13
14<div class="serchBox">
15  <select name="region">
16    <option value="">地域を選択</option>
17    <option value="all">ALL</option>
18    <option value="matudo">松戸のみ</option>
19    <option value="matudo,all">松戸・ALL</option>
20    <option value="chiba">千葉市</option>
21    <option value="katuura">勝浦市</option>
22    <option value="abiko">我孫子市</option>
23    <option value="okashiwa">柏市</option>
24  </select>
25  <button type="button" id="search">検索</button>
26  <button type="button" id="reset">リセット</button>
27</div>
28
29<div class="list" data-tiiki='["all"]'>松戸市</div>
30<div class="list" data-tiiki='["matudo"]'>松戸市</div>
31

投稿2019/05/21 09:06

yambejp

総合スコア118164

satoru225Simple

2019/05/21 09:23

ご返答ありがとうございます。ソースコードまで書いていただいて、ありがたいのですが、こちら、コードペンでそのまま記載して試したところ、うまくいきませんでした。元々の自分のソースコードにこちらを追記するということでしょうか？知識が乏しく申し訳ありません。何卒宜しくお願い致します

yambejp

2019/05/21 09:29

> 元々の自分のソースコードにこちらを追記するいえ、置き換えてくださいというかまるっとコピペして動作を確認してください

satoru225Simple

2019/05/21 09:38

こちら、アドバイス通り、コピペして動作確認したら、うまくいきました！ありがとうございます！

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

$('.serchBox select').eq(i).val()で取得できる値は、「matudo,all」と思います。
data-tiikiに設定されている値は、「all」と「matudo」なので、「matudo,all」で検索してもヒットしません。（data-tiikiに「matudo,all」と設定されている場合はヒットします）
やりたいことを実現するにはdata-tiikiに設定されている値に合うように、「matudo,all」をカンマで分割してそれぞれ検索してあげるとよいと思います。
stringのsplit()というfunctionを使うと、引数に指定した区切り文字で分割した配列にすることができます。この配列の要素の数だけ、検索してあげるとよいかと思います。

投稿2019/05/21 09:08

SE-studying-now

総合スコア351

satoru225Simple

2019/05/21 09:28 編集

ご返答ありがとうございます。この場合、 js,jqueryのソースコード内の var target = $('.serchBox select').eq(i).val(); にsplit(",")を付け足すのかなと考えて、実行してみたのですが、 <div class="list" data-tiiki='["all"]'>松戸市 </div> <div class="list" data-tiiki='["matudo"]'>松戸市 </div> 上記どちらとも表示されず、うまくいきませんでした。記載場所は自分の考えであっているでしょうか？何卒宜しくお願い致します

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

あなたの回答