JavaScript 取得した複数のidと同名のclassが取れない

前提・実現したいこと

複数の選択値(radio/checkbox/selectbox)に設定されているそれぞれのid名(以下のコードにて取得)と同名のclass名を検索・取得したいのですが、うまく取得できません。

JavaScript
1  for (let i = 0; i < fruitform.length; i++){
2    if(fruitform[i].checked){ 
3      arr.push(fruitform[i].id);
4      select = arr;
5    }else if(fruitform[i].selected){
6      arr.push(fruitform[i].id);
7      select = arr;
8    }
9  }

試したこと

selectが持つidを基に下記ののように記述しクラスの取得を試みましたが取得ができません。

JavaScript
1Document.getElementsByClassName(select);
2Document.querySelectorAll('.' + select);

selectが配列でできているためforEachでくくってみるも、idからクラスの取得をする方法がわからず
検証ができていません。

querySlectorの返り値がNodeListとなり配列へ変換が必要ということはわかりました。
その為、下記サイトを参考に試しましたが取得はできませんでした。

【わずか5文字！document.querySelectorAllの返り値を配列に変える方法】
https://qiita.com/mtoutside/items/548cb6b08c160ba6e514

どのように記述をしたら取得ができるのか教えてください。

###追記
以下、検索フォームページのHTMLです。

HTML
1<head>
2  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
3</head>
4<body>
5<!-- 検索用プルダウンフォームを、絞り込みたいテーブルより前に設置します -->
6<div class="search-area">
7  <form action="">
8    <b>選択1</b><br>
9    <input type="radio" name="fruitform" id="banana" value="バナナ"/>　バナナ<br>
10    <input type="radio" name="fruitform" id="apple" value="りんご" />　りんご<br>
11    <input type="radio" name="fruitform" id="orange" value="みかん" />　みかん<br>
12    <br>
13    <b>選択2</b><br>
14    <input type="checkbox" name="fruitform" id="indoneshia" value="インドネシア"> インドネシア産
15    <input type="checkbox" name="fruitform" id="aomori" value="青森"> 青森産
16    <input type="checkbox" name="fruitform" id="shizuoka" value="静岡"> 静岡産
17    <br><br>
18    <b>選択3</b><br>
19    <select>
20      <option>---</option>
21      <option name="fruitform" id="150" value="150円">150円以下</option>
22      <option name="fruitform" id="160" value="160円">160円以下</option>
23      <option name="fruitform" id="170" value="170円">170円以下</option>
24      <option name="fruitform" id="180" value="180円">180円以下</option>
25    </select>
26  </form>
27  <input type="button" value="検索" onclick="fruitformpage()"/>
28<p>検索結果<br>　<span id="output">　</span></p>
29</div>
30<script type="text/javascript" src="/wp-admin/js/TestFruit.js"></script>
31</body>

検索対象となるテーブルです

HTML
1<table id="fruit_table" class="csvtohtml">
2  <thead>
3    <tr class="headers">
4      <th class="colset colset-1">産地</th>
5      <th class="colset colset-2">フルーツ</th>
6      <th class="colset colset-3">金額</th>
7      <th class="colset colset-4">販売地</th>
8    </tr>
9  </thead>
10<tbody>
11    <tr class="rowset odd rowset-1">
12      <td class="colset colset-1">インドネシア産</td>
13      <td class="colset colset-2"><p class='banana'>バナナ</p></td>
14      <td class="colset colset-3">150円</td>
15      <td class="colset colset-4">鎌倉市</td>
16    </tr>
17    <tr class="rowset even rowset-2">
18      <td class="colset colset-1">青森産</td>
19      <td class="colset colset-2"><p class='apple'>りんご</p></td>
20      <td class="colset colset-3">175円</td>
21      <td class="colset colset-4">横須賀市</td>
22    </tr>
23    <tr class="rowset odd rowset-3">
24      <td class="colset colset-1">静岡産</td>
25      <td class="colset colset-2"><p class='orange'>みかん</p></td>
26      <td class="colset colset-3">160円</td>
27      <td class="colset colset-4">三浦市</td>
28    </tr>
29    <tr class="rowset even rowset-4">
30      <td class="colset colset-1">千葉産</td>
31      <td class="colset colset-2"><p class='orange'>みかん</p></td>
32      <td class="colset colset-3">160円</td>
33      <td class="colset colset-4">逗子市</td>
34    </tr>
35    <tr class="rowset odd rowset-5">
36      <td class="colset colset-1">沖縄産</td>
37      <td class="colset colset-2"><p class='banana'>バナナ</p></td>
38      <td class="colset colset-3">165円</td>
39      <td class="colset colset-4">厚木市</td>
40    </tr>
41    <tr class="rowset even rowset-6">
42      <td class="colset colset-1">八丈島産</td>
43      <td class="colset colset-2"><p class='banana'>バナナ</p></td>
44      <td class="colset colset-3">170円</td>
45      <td class="colset colset-4">綾瀬市</td>
46    </tr>
47    <tr class="rowset odd rowset-7">
48      <td class="colset colset-1">インド産</td>
49      <td class="colset colset-2"><p class='apple'>りんご</p></td>
50      <td class="colset colset-3">170円</td>
51      <td class="colset colset-4">横浜市</td>
52    </tr>
53    <tr class="rowset even rowset-8">
54      <td class="colset colset-1">マレーシア産</td>
55      <td class="colset colset-2"><p class='banana'>バナナ</p></td>
56      <td class="colset colset-3">155円</td>
57      <td class="colset colset-4">藤沢市</td>
58    </tr>
59  </tbody>
60</table>

yambejp

2020/02/20 06:37

htmlも提示ください

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じでしょうか

codepen

投稿2020/02/20 06:49

総合スコア116835

2020/02/20 06:49

2020/02/20 06:57 編集

optionにnameつけたりidを拾ったりは意味がないのでやめたほうがよいですセレクトボックスにnameをつけるのはOKですがその場合optionのidを拾うのはちょっと・・・

Miken_work

2020/02/20 07:03

試してみましたが、selectは空の状態で処理が次に行ってしまいます。

yambejp

2020/02/20 07:35 編集

codepenにサンプル上げました挙動を確認して、想定と違う場合はどうしたいか具体的に書いてください

Miken_work

2020/02/20 07:38

理想としてはoptionは数値のような比較の仕方ができる状態にしたいと思っております。今回の質問にて上記の状態に解決できればいいのですが現状、radioボタンとcheckboxの内容のみで、まだoptionに関しては調べられていないです。

yambejp

2020/02/20 07:42

＞ optionは数値のような比較の仕方ができる状態にしたいちょっと意味がわかりません。codepenのサンプルではチェックボックスやラジオボタンのみならずセレクトボックスのoptionも反応させてますがそういうことではないのですか？

Miken_work

2020/02/20 08:01 編集

yambejp様失礼いたしました。投稿後に追加のご返答に気づきました。＞セレクトボックスのoptionも反応させてますがそういうことではないのですか？分かりずらく、申し訳ございません。その認識で合っています。現状はラジオボタン・チェックボックス・セレクトボックスで選択した値のidの取得は実証できています。今回解決したいのが、取得したid名を基にテーブル側(この後追記にて記載いたします)で指定してある同名のclassを検索し取得するということです。 (例) 検索フォーム選択値バナナ(id：banana)、りんご(id：Apple)を基に　　　　　　　　↓ テーブルバナナ(class：banana)、りんご(class：banana)を取得またoptionでのnameの設定はフォーム全体でidの取得の際に認識させるために使用しているため他対応策が自身でわかればいいのですが、まだそこまでの知識がなく現状で適応している状態です。

yambejp

2020/02/20 08:01

> optionでのnameの設定 nameは特別な属性なので本来の使用用途を超えた使い方をしないほうがよいでしょう。 optionにnameをつけるならdata-nameなどカスタムデータにした方がよいでしょう

yambejp

2020/02/20 08:31 編集

idが150のものからクラスを得たいときは.150を指定するのですよね？そこでエラーになります価格の比較はちょっと今のままの構成では処理できないですね（範囲を指定したいんですよね？）そもそもの話、全部同じnameはありえませんグルーピングするならそこでクラスを使ってまとめてください

Miken_work

2020/02/20 08:48

nameは分けた方が良かったのですね。先ほどのカスタムデータですが、詳しくはまだ調べられていませんが、それぞれで取得法が違ってくるとしたら記述内容が増えたりするのかなと思ったのですが、optionをdata-nameにするのであれば他要素のnameもdata-nameに変えた方がよろしいのでしょうか？

yambejp

2020/02/20 08:54

条件だけおしえてください産地とフルーツと値段はor検索なのですか、and検索なのですか？

Miken_work

2020/02/20 08:57

and検索です

yambejp

2020/02/20 10:14 編集

フルーツや産地が未選択だと一つも表示されなくて大丈夫ですね？価格が--のときも一つも表示されないんですね？ちょっと説明があとからあとから追加されるのでなんとも言えません。新しいサンプルあげたので挙動を確認してください https://codepen.io/yambejp/pen/ZEGpXbX

Miken_work

2020/02/21 00:22

ご返信遅くなりました。説明足らずで申し訳ございませんありがとうございます。挙動確認後自身の環境に反映してみます。

Miken_work

2020/02/21 01:59

環境へ反映してみたところ下記のエラーが発生し動作できませんでした Uncaught TypeError: e.indexOf is not a function at w.fn.init.w.fn.load (jquery.min.js:2) at HTMLDocument.<anonymous> (lightning.min.js?ver=8.2.0:2) at l (jquery.min.js:2) at c (jquery.min.js:2)

yambejp

2020/02/21 02:09

> 下記のエラー私のソースはjQueryを利用していませんので jQueryのエラーがでるのは質問者さんがなにか変なことをしているのだと思います

行動規範の内容に同意します