回答編集履歴

1 追記しました

miyakichi

miyakichi score 295

2018/10/24 18:43  投稿

セレクトボックスなので、checkedではなくselectedでは?
```javascript
function get_selected_input_items(name) {
   var searchData = [];
//   $('[name=' + name + ']:checked').each(function() {
   $('[name=' + name + '] option:selected').each(function() {
       searchData.push($('[name="name"] option:selected').val());
   });
   return searchData;
}
```  
検証ツールとはなんでしょうか?  
こちらで試したところいけましたが?  
```HTML  
<!doctype html>  
<html lang="ja">  
<head>  
   <meta charset="utf-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
   <title>TEST</title>  
   <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>  
   <style>  
       .is-hide {  
           display: none;  
       }  
   </style>  
</head>  
<body>  
   <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">  
           <p>1111</p>  
       </li>  
       <li class="list_item" data-oz="4-6oz" data-yen="100-199yen" data-type="flat">  
           <p>222</p>  
       </li>  
   </ul>  
   <script>  
       $(function() {  
           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() {  
               $('select[name=' + name + '] option:selected').each(function() {  
                   searchData.push($('select[name=' + name + '] option:selected').val());  
               });  
               return searchData;  
           }  
       });  
   </script>  
</body>  
</html>  
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る