質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3448閲覧

複数のセレクトボックスの選択内容でリストを絞り込み表示させたい。

sean08

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/10/24 05:30

複数のセレクトボックスで選択した内容で、リストの絞り込みを行いたいです。

参考にしたのは下記ページです。
セレクトボックスで同様の絞り込みを実現させたいのですが、変更方法がよく分かっていません。
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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
miyakichi

総合スコア297

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sean08

2018/10/24 08:46

回答ありがとうございます。 該当部分を修正し、検証ツールで確認したところ、 <修正前> searchData = [] <修正後> searchData = [undefind] となり、どの選択でも全アイテムが非表示になってしまいました。
sean08

2018/10/24 09:53

検証ツール→クロームでのデバッグです。 すみません、変な表現をしてしまいまして。。。 select[name=' + name + ']の、selectを追加して無事、絞り込みできました! ありがとうございました!!
miyakichi

2018/10/24 10:38

あっ、最初の回答は「select」抜けてましたね。(*_ _)人ゴメンナサイ
sean08

2018/10/24 11:44

いえいえ。本当にありがとうございました!!
guest

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
madoka9393

総合スコア992

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sean08

2018/10/24 05:45

回答ありがとうございます。 $(this).val()試してみたのですが、取得できなかったんです。。。
madoka9393

2018/10/24 05:47

以下で選択時のセレクトボックスのvalueが取得できませんか? $(function() { // 絞り込み項目を変更した時 $(document).on('change', '.search-box select', function() { console.log($(this).val()); search_filter(); }); });
sean08

2018/10/24 07:05

回答ありがとうございます。 補足させていただきます。 選択しているオプションの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(); }); }); に変更してみましたが、検証ツールで確認すると 値が何も表示されませんでした。。。
sean08

2018/10/24 08:47

「追記」確認しました。 ありがとうございます。 実現させたいことが後出しになってしまいますが、 selectボックスの内容が何種類もあります。 かつ、同一ページで使用するセレクトボックスの内容がページによって変動します。 絞り込みのプログラムは、全ての組み合わせ使用できるものにしたいのです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問