実現したいこと
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つどちらとも表示されるようにならないか 試してみましたが、 うまくいきませんでした。何卒宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー