javascriptでHTMLを絞り込み検索できるようにしたいです

javascriptを使用して、HTMLで書いてある要素を絞り込み検索できるようにしたいです。
具体的なイメージは、下記URLのページです。
これに、リセットボタンを付けたいのですがどのように書けばいいのかわからず困っています。
どうかご教授いただけないでしょうか。

http://cly7796.net/wp/sample/implement-the-proce …

No.1 ベストアンサー 回答者： babu_babu_baboo 回答日時： 2018/12/25 09:51

<input type="button" value="reset" onclick="

var select = document.querySelectorAll ('.serchBox select option:first-of-type');
Array.from (select).forEach (s => s.selected = true);
var ops = document.querySelectorAll ('.serchBox input[type=checkbox]:checked');
Array.from (ops).forEach (o => o.checked = false);
">

この回答へのお礼

回答ありがとうございます！
そしてすみません…
回答頂いた内容でチェックボックス等はチェックが外れるのですが、選択して非表示になってたものが表示されませんでした。
どうすれば非表示にしていたものもリセットボタンで表示できるか教えていただけないでしょうか。

お手数おかけしてすみません。

お礼日時：2018/12/25 20:49

No.4 回答者： babu_babu_baboo 回答日時： 2018/12/27 07:01

()をつける。

わからないなら、あきらめて。

この回答へのお礼

ありがとうございます…
()をつける…。
が…頑張って勉強して試してみます！

お礼日時：2018/12/28 21:29

No.3 回答者： amanojaku6 回答日時： 2018/12/27 00:23

新規のHTMLファイルを作り、コピペして下さい。

自分で画像を用意する必要があります、当然 データの修正が必要です。
画像用ディレクトリは「image000」にしてます。

JavaScriptデモ／Select001／018.htm
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/& …

この回答へのお礼

ご回答ありがとうございます！
そしてすみません…呼び出す形ではなく、既にHTMLで表示させている項目を、表示非表示にしたく…せっかく回答頂いたのにすみません(TT)

お礼日時：2018/12/28 21:28

No.2 回答者： babu_babu_baboo 回答日時： 2018/12/26 09:54

サンプルのプログラムを見渡したら

filter_list という関数を呼び出しているみたいです。それを最後に呼び出せばOK！！

--
例えばサンプルが１万件登録されていたとします。何か選択肢を解除するたび
その１万件を再表示するためにマシンパワーを割かれていては非常に効率が悪い。

「表示件数が少ないから大丈夫です」と言い返すかもしれませんが、
それではインターフェースとしても設計が悪い。見直すべきです。

「サンプルで作るのだから大丈夫です」と言い返すかもしれませんが、
最初の設計図がまずいと結局何か改良しようとするたびに苦労します。

「ええ、大丈夫です」というのであれば、何も申すことはありません。

この回答へのお礼

ご回答とアドバイスありがとうございます！
そうですね…改良していくかもしれないのでもう一度良く考えたいと思います。
とりあえず急ぎ、一時しのぎで実装したいのですがなにぶん素人でして…
本当に申し訳ないのですが、
リセットボタンを押した際にfilter_listを最後に呼び出すにはどのように書けば良いでしょうか…。
本当にすみません。

お礼日時：2018/12/26 11:54