Q&A
回答ありがとうございます。
$(this).val()試してみたのですが、取得できなかったんです。。。
複数のセレクトボックスで選択した内容で、リストの絞り込みを行いたいです。
参考にしたのは下記ページです。
セレクトボックスで同様の絞り込みを実現させたいのですが、変更方法がよく分かっていません。
https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html
よろしくお願いいたします。
まず選択しているオプションのvalue値が取得できないです。
<form> <div class="filterBox"> <div class="search-box"> <span>生地厚み</span> <select name="oz"> <option value="">すべて</option> <option value="4oz">～4オンス</option> <option value="4-6oz">4.1～6オンス</option> <option value="6-8oz">6.1～8オンス</option> </select> </div> <div class="search-box"> <span>価格帯</span> <select name="yen"> <option value="">すべて</option> <option value="99yen">～99円</option> <option value="100-199yen">100～199円</option> <option value="200-299yen">200～299円</option> <option value="300-399yen">300～399円</option> <option value="400-499yen">400～499円</option> <option value="500yen">500円以上</option> </select> </div> <div class="search-box"> <span>形状</span> <select name="type"> <option value="">すべて</option> <option value="flat">マチなし</option> <option value="ship-bottom">マチあり</option> <option value="other">その他</option> </select> </div> </div> </form> <ul class="list"> <li class="list_item" data-oz="4oz" data-yen="99yen" data-type="flat"> <img src="aaa"> </li> <li class="list_item" data-oz="4oz" data-yen="100-199yen" data-type="flat"> <img src="bbb"> </li> ・ ・ ・ </ul> <script> var searchBox = '.search-box'; // 絞り込む項目を選択するエリア var listItem = '.list_item'; // 絞り込み対象のアイテム var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名 $(function() { // 絞り込み項目を変更した時 $(document).on('change', '.search-box select', function() { search_filter(); }); }); //リストの絞り込みを行う function search_filter() { // 非表示状態を解除 $(listItem).removeClass(hideClass); for (var i = 0; i < $('.search-box select').length; i++) { var name = $('.search-box select').eq(i).attr('name'); // 選択されている項目を取得 var searchData = get_selected_input_items(name); // 選択されている項目がない、またはALLを選択している場合は飛ばす if(searchData.length === 0 || searchData[0] === '') { continue; } // リスト内の各アイテムをチェック for (var j = 0; j < $(listItem).length; j++) { // アイテムに設定している項目を取得 var itemData = $(listItem).eq(j).data(name); // 絞り込み対象かどうかを調べる if(searchData.indexOf(itemData) === -1) { $(listItem).eq(j).addClass(hideClass); } } } } //選択されているoptionのvalue属性の値 function get_selected_input_items(name) { var searchData = []; $('[name=' + name + ']:checked').each(function() { searchData.push($('[name="name"] option:selected').val()); }); return searchData; } </script>
回答2件
0
ベストアンサー
セレクトボックスなので、checkedではなくselectedでは？
javascript
1function get_selected_input_items(name) { 2 var searchData = []; 3// $('[name=' + name + ']:checked').each(function() { 4 $('[name=' + name + '] option:selected').each(function() { 5 searchData.push($('[name="name"] option:selected').val()); 6 }); 7 return searchData; 8}
検証ツールとはなんでしょうか？
こちらで試したところいけましたが？
HTML
1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 6 <title>TEST</title> 7 <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script> 8 <style> 9 .is-hide { 10 display: none; 11 } 12 </style> 13</head> 14<body> 15 <form> 16 <div class="filterBox"> 17 <div class="search-box"> 18 <span>生地厚み</span> 19 <select name="oz"> 20 <option value="">すべて</option> 21 <option value="4oz">～4オンス</option> 22 <option value="4-6oz">4.1～6オンス</option> 23 <option value="6-8oz">6.1～8オンス</option> 24 </select> 25 </div> 26 <div class="search-box"> 27 <span>価格帯</span> 28 <select name="yen"> 29 <option value="">すべて</option> 30 <option value="99yen">～99円</option> 31 <option value="100-199yen">100～199円</option> 32 <option value="200-299yen">200～299円</option> 33 <option value="300-399yen">300～399円</option> 34 <option value="400-499yen">400～499円</option> 35 <option value="500yen">500円以上</option> 36 </select> 37 </div> 38 <div class="search-box"> 39 <span>形状</span> 40 <select name="type"> 41 <option value="">すべて</option> 42 <option value="flat">マチなし</option> 43 <option value="ship-bottom">マチあり</option> 44 <option value="other">その他</option> 45 </select> 46 </div> 47 </div> 48 </form> 49 <ul class="list"> 50 <li class="list_item" data-oz="4oz" data-yen="99yen" data-type="flat"> 51 <p>1111</p> 52 </li> 53 <li class="list_item" data-oz="4-6oz" data-yen="100-199yen" data-type="flat"> 54 <p>222</p> 55 </li> 56 </ul> 57 <script> 58 $(function() { 59 var searchBox = '.search-box'; // 絞り込む項目を選択するエリア 60 var listItem = '.list_item'; // 絞り込み対象のアイテム 61 var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名 62 $(function() { 63 // 絞り込み項目を変更した時 64 $(document).on('change', '.search-box select', function() { 65 search_filter(); 66 }); 67 }); 68 //リストの絞り込みを行う 69 function search_filter() { 70 // 非表示状態を解除 71 $(listItem).removeClass(hideClass); 72 for (var i = 0; i < $('.search-box select').length; i++) { 73 var name = $('.search-box select').eq(i).attr('name'); 74 // 選択されている項目を取得 75 var searchData = get_selected_input_items(name); 76 // 選択されている項目がない、またはALLを選択している場合は飛ばす 77 if(searchData.length === 0 || searchData[0] === '') { 78 continue; 79 } 80 // リスト内の各アイテムをチェック 81 for (var j = 0; j < $(listItem).length; j++) { 82 // アイテムに設定している項目を取得 83 var itemData = $(listItem).eq(j).data(name); 84 // 絞り込み対象かどうかを調べる 85 if(searchData.indexOf(itemData) === -1) { 86 $(listItem).eq(j).addClass(hideClass); 87 } 88 } 89 } 90 } 91 //選択されているoptionのvalue属性の値 92 function get_selected_input_items(name) { 93 var searchData = []; 94 // $('[name=' + name + ']:checked').each(function() { 95 $('select[name=' + name + '] option:selected').each(function() { 96 searchData.push($('select[name=' + name + '] option:selected').val()); 97 }); 98 return searchData; 99 } 100 }); 101 </script> 102</body> 103</html>
投稿2018/10/24 08:33
編集2018/10/24 09:43
総合スコア297
0
「セレクトボックスの選択された値を取得する」だけなら
changeイベントが発火した時の$(this).val()を取ってくるだけじゃダメですかね…？
追記
changeイベントが発火した時にそれぞれのセレクトボックスの選択されている項目のvalueを取得し、
それらが条件に合致すれば～のように組み替えて見るのはいかがでしょう。
これを
JavaScript
1$(function() { 2 // 絞り込み項目を変更した時 3 $(document).on('change', '.search-box select', function() { 4 search_filter(); 5 }); 6});
こうして
JavaScript
1$(function() { 2 // 絞り込み項目を変更した時 3 $(document).on('change', '.search-box select', function() { 4 var selected_oz = $("*[name=oz] option:selected").val(); 5 var selected_yen = $("*[name=yen] option:selected").val(); 6 var selected_type = $("*[name=type] option:selected").val(); 7 //ここに上記の値によって表示するlist-itemを切り替える処理 8 }); 9});
投稿2018/10/24 05:40
編集2018/10/24 07:29
総合スコア994
以下で選択時のセレクトボックスのvalueが取得できませんか？
$(function() {
// 絞り込み項目を変更した時
$(document).on('change', '.search-box select', function() {
console.log($(this).val());
search_filter();
});
});
回答ありがとうございます。
補足させていただきます。
選択しているオプションのvalue値が取得できないというのは、コードのこの部分になります。
//選択されているoptionのvalue属性の値
function get_selected_input_items(name) {
var searchData = [];
$('[name=' + name + ']:checked').each(function() {
searchData.push($('[name="name"] option:selected').val()); ←この部分
});
return searchData;
}
先ほどは、
$('[name="name"] option:selected').val()
↓
$(this).val()
に変更してみましたが、取得できませんでした。
そして、
$(function() {
// 絞り込み項目を変更した時
$(document).on('change', '.search-box select', function() {
console.log($(this).val());
search_filter();
});
});
に変更してみましたが、検証ツールで確認すると
値が何も表示されませんでした。。。
＞検証ツールで確認すると値が何も表示されませんでした。。。
https://jsfiddle.net/madoka9393/ex5b9u6j/
当方では確認できない(値が表示されます)ですね…。
「追記」確認しました。
ありがとうございます。
実現させたいことが後出しになってしまいますが、
selectボックスの内容が何種類もあります。
かつ、同一ページで使用するセレクトボックスの内容がページによって変動します。
絞り込みのプログラムは、全ての組み合わせ使用できるものにしたいのです。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/24 08:46
2018/10/24 09:53
2018/10/24 10:38
2018/10/24 11:44