Q&A
タグにjQueryを追加しておいてください。
実現したいこと
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件
0
ベストアンサー
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
総合スコア114814
ご返答ありがとうございます。
ソースコードまで書いていただいて、
ありがたいのですが、
こちら、コードペンでそのまま記載して試したところ、
うまくいきませんでした。
元々の自分のソースコードにこちらを追記するということでしょうか？
知識が乏しく申し訳ありません。
何卒宜しくお願い致します
> 元々の自分のソースコードにこちらを追記する
いえ、置き換えてください
というかまるっとコピペして動作を確認してください
こちら、アドバイス通り、コピペして動作確認したら、
うまくいきました！
ありがとうございます！
0
$('.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
総合スコア351
ご返答ありがとうございます。
この場合、
js,jqueryのソースコード内の
var target = $('.serchBox select').eq(i).val();
にsplit(",")を付け足すのかなと
考えて、実行してみたのですが、
<div class="list" data-tiiki='["all"]'>松戸市
</div>
<div class="list" data-tiiki='["matudo"]'>松戸市
</div>
上記どちらとも表示されず、
うまくいきませんでした。
記載場所は自分の考えであっているでしょうか？
何卒宜しくお願い致します
あなたの回答
tips
プレビュー
