実現したいこと

ここに実現したいことを箇条書きで書いてください。

チェックボックスとプルダウンメニューとフリー検索を融合させた絞り込みページを制作したい。

前提

使用したい言語はJavaScriptとjQueryです。

今記述しているHTML

<form name="Form" id="Form">
    <div>
        <div>
            <!-- プルダウンメニューここから -->
            <div>
                <p>都道府県を選択</p>
                <div>
                    <select name="pref" id="Pref">
                        <option value="都道府県を選択">都道府県を選択</option>
                        <option value="東京">東京</option>
                        <option value="埼玉">埼玉</option>
                        <option value="神奈川">神奈川</option>
                    </select>
                </div>
            </div>
            <!-- チェックボックスここから -->
            <div>		
                <p>カテゴリーを選択</span></p>
                <ul>
                    <li>
                        <input type="checkbox" name="ctgr" value="food" id="ctgr01">
                        <label for="ctgr01">飲食店</label>
                    </li>
                    <li>
                        <input type="checkbox" name="ctgr" value="apareru" id="ctgr02">
                        <label for="ctgr02">アパレル</label>
                    </li>
                    <li>
                        <input type="checkbox" name="ctgr" value="jutaku" id="ctgr03">
                        <label for="ctgr03">住宅</label>
                    </li>
                </ul> 
            </div>
            <!-- 検索ボックスここから -->
            <div>
                <p>フリーワードを入力</p>
                <div>
                    <input name="keywords" type="text" id="Keywords" placeholder="フリーワードを入力">
                </div>
            </div>
        </div>
        <!-- 全クリア・検索ボタンここから -->
        <div>
            <div>
                <input type="submit" name="#" value="全クリア" id="Search-clr">
                <input type="submit" name="#" value="検索" id="Search-btn">
            </div>
        </div>
    </div>

<div id="#results">
    <table>
        <tr>
            <th>カテゴリ</th>
            <th>住所</th>
            <th>詳細</th>
        </tr>
        <tr>
            <td>埼玉の飲食店</td>
            <td>埼玉県〇〇市</td>
            <td>詳細リンク</td>
        </tr>
        <tr>
            <td>東京の住宅</td>
            <td>東京都〇〇区</td>
            <td>詳細リンク</td>
        </tr>
        <tr>
            <td>神奈川のアパレル</td>
            <td>神奈川県〇〇市</td>
            <td>詳細リンク</td>
        </tr>
    </table>
</div>

解決しない問題

上記のフォームでプルダウンメニューから任意の県を一つ選択した後、
チェックボックスで好みのカテゴリーを選択し、
場合によってはフリー検索でも絞り込みができるようなシステムを
jQuery または JavaScript で構築したいと考えています。

絞り込みの動きは、任意の項目が選択されたら<div id="#results">内の<tr>タグが絞り込み表示がされるようにしたいです。
ですが、プルダウンメニューとチェックボックス、フリー検索を同時に機能させるコードがうまく書けません。

初心者が大掛かりなことをしようしているのは十分承知なのですが、
どなたか分かる方知恵を分けて頂けませんでしょうか？

補足情報（FW/ツールのバージョンなど）

jquery-3.6.4.min.js

1T2R3M4

2023/07/07 02:43

https://qiita.com/DaijaYellow/questions/c035d1cdc59c6daa4cca 以下ご対応ください。 https://teratail.com/help#posted-otherservice

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

回答2件

データを分離し、データを絞り込んでからテーブルデータを作るのが賢明です

参考

以下「data.json」という名前で保存してhtmlと同じフォルダにいれておく

json
1[
2{"pref":"埼玉",  "cate":"飲食店",  "address":"埼玉県〇〇市",  "link":"http://saitama1.example.com"},
3{"pref":"東京",  "cate":"住宅",    "address":"東京都〇〇区",  "link":"http://tokyo1.example.com"},
4{"pref":"神奈川","cate":"アパレル","address":"神奈川県〇〇市","link":"http://kanagawa1.example.com"},
5{"pref":"東京",  "cate":"住宅",    "address":"東京都△△区",  "link":"http://tokyo2.example.com"},
6{"pref":"東京",  "cate":"飲食店",  "address":"東京都□□市",  "link":"http://tokyo3.example.com"},
7{"pref":"埼玉",  "cate":"住宅",    "address":"埼玉県〇〇市",  "link":"http://saitama2.example.com"}
8]

■検索
一旦フリーワード検索は保留

javascript
1<script>
2window.addEventListener('DOMContentLoaded', async()=>{
3  const data=await fetch('data.json').then(res=>res.json());
4  btn.addEventListener('click',e=>{
5    e.preventDefault();
6    const choose=data.filter(x=>{
7      const flg1=["",x.pref].includes(Pref.value);
8      const ctgr=[...document.querySelectorAll('[name=ctgr]:checked')];
9      const flg2=ctgr.length==0 || ctgr.map(x=>x.value).includes(x.cate);
10      return flg1 && flg2;
11    });
12    console.log(choose);
13    results.innerHTML="";
14    choose.forEach(x=>{
15      results.insertAdjacentHTML("beforeend",`<tr><td>${x.pref}の${x.cate}</td><td>${x.address}</td><td><a href="${x.link}">詳細サイト</a></td></tr>`)
16    });
17  });
18});
19</script>
20<form id="Form">
21<fieldset>
22<legend>都道府県を選択<</legend>
23<select name="pref" id="Pref">
24<option value="">都道府県を選択</option>
25<option value="東京">東京</option>
26<option value="埼玉">埼玉</option>
27<option value="神奈川">神奈川</option>
28</select>
29</fieldset>
30<fieldset>
31<legend>カテゴリーを選択</legend>
32<ul>
33<li><label><input type="checkbox" name="ctgr" value="飲食店">飲食店</label></li>
34<li><label><input type="checkbox" name="ctgr" value="アパレル">アパレル</label></li>
35<li><label><input type="checkbox" name="ctgr" value="住宅">住宅</label></li>
36</ul> 
37</fieldset>
38<div>
39<input type="submit" value="検索" id="btn">
40</div>
41</form>
42<hr>
43<div>
44<table>
45<thead>
46<tr>
47<th>カテゴリ</th>
48<th>住所</th>
49<th>詳細</th>
50</tr>
51</thead>
52<tbody id="results">
53</tbody>
54</table>
55</div>