絞り込みを決定・リセットボタンもつけて実装したい

前提・実現したいこと

http://cly7796.net/wp/sample/implement-the-process-of-narrowing-down-the-list/index5.html
http://cly7796.net/wp/sample/implement-the-process-of-narrowing-down-the-list/index4.html

上記の二つを基に、プルダウンメニューで選択したのちに、
決定ボタンを押すと、絞り込む使用で、リセットボタンを押すと、
絞り込みが初期化し、ロード時の状態に戻るギミックを作成したいと思っております。

現状リセットボタンを押しても、プルダウンが「地域を選択」と初期化されるだけで、
ロード時に表示されている要素は消えたままになる。

発生している問題・エラーメッセージ

エラーメッセージ等はデバックツールで検証しても
特に出ておりませんでした。

該当のソースコード

html
1<html lang="ja">
2<head>
3<title>HTML, CSS and JavaScript demo</title>
4<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
5<link rel="stylesheet" type="text/css" href="test.css">
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
7<script type="text/javascript" src="function.js"></script>
8
9</head>
10<body>
11<div id="page">
12	<div class="serchBox">
13		<select name="region">
14			<option value="">地域を選択</option>
15			<option value="matudo">松戸市</option>
16			<option value="chiba">千葉市</option>
17			<option value="katuura">勝浦市</option>
18			<option value="abiko">我孫子市</option>
19      <option value="okashiwa">柏市</option>
20		</select>
21		<button id="search">検索</button>
22    <button id="reset">リセット</button>
23	</div>
24
25	<ul class="list">
26		<li>
27
28			<p class="region"><span class="matudo">松戸市</span></p>
29
30		</li>
31
32	</ul>
33</div>
34</body>
35</html>

js
1$(function() {
2	$(document).on('change', '.serchBox select, .serchBox input[type=checkbox]', function() {
3		filter_list();
4	});
5
6	// リセットボタンをクリックしたときの処理
7	$('#reset').on('click', function() {
8		// フォームのselectとcheckboxをリセット
9		$('.serchBox select').val('');
10		// リストの絞り込みをリセット
11		filter_list();
12	});
13
14	// リストを絞り込む関数
15	function filter_list() {
16	var lists = $('.list li');
17	$('#search').on('click', function() {
18		lists.show();
19		for (var i = 0; i < $('.serchBox select').length; i++) {
20			// 絞り込みの項目を取得
21			var item = $('.serchBox select').eq(i).attr('name');
22			// 絞り込みの対象を取得
23			var target = $('.serchBox select').eq(i).val();
24
25			if(target != '') {
26				for (var j = 0; j < lists.length; j++) {
27					// 絞り込み対象でない場合は非表示
28					if(!lists.eq(j).find('.' + item).find('span').hasClass(target)) {
29						lists.eq(j).hide();
30						}
31					};
32				}
33			};
34		});
35	}
36});

試したこと

jsソースコード内の

js
1var lists = $('.list li');
2$('#search').on('click', function() {
3lists.show();

上記3行を

js
1var lists = $('.list li');
2lists.show();

上記に変えると、
リセットボタンを押すことで、
プルダウンもhtml要素の表示も、
ロード時の状態に戻ることは判明。
※ただし、決定ボタンを押したときの
動作を削ることになるため、決定を押すことで
絞り込みを行うことができなくなる。

また、なぜ
var lists = $('.list li');
$('#search').on('click', function() {
lists.show();
こちらではリセットによる初期化がうまくいかないかがわかりません。

プルダウンを選択し、決定ボタンで実行する動作と、
リセットボタンで初期化する動作を両立する
にはどこが原因かよくわかっておりません。

何卒宜しくお願い致します。

m.ts10806

2019/05/10 01:25

「正しい」は質問者さんだけが知っている仕様、要件です。具体的に記載してください。「コードください」は質問ではなく作業依頼です。もう少しご自身で状況整理し、コンソールでエラーなど確認、デバッグを行って問題を絞ったうえで質問を調整してください。 https://teratail.com/help/question-tips#questionTips1-2 https://teratail.com/help/question-tips#questionTips2-1 https://teratail.com/help/question-tips#questionTips3-4

satoru225Simple

2019/05/10 01:36

失礼いたしました。ご指摘ごもっともです。もう一度整理をして、再度できなかった場合、ご質問をさせていただきます。

m.ts10806

2019/05/10 01:37

質問は編集できますので整理出来次第、内容調整いただけたらと。

satoru225Simple

2019/05/10 01:39

とりあえず、『「コードください」は質問ではなく作業依頼です。』上記の部分だけ削除いたしました。大変失礼いたしました。

satoru225Simple

2019/05/10 02:20

お世話になっております。内容を調整し、自分で試したことと、現在エラー等が出ているかなどを追記いたしました。もし可能でしたら見ていただけますと幸いです。何卒宜しくお願い致します。

satoru225Simple

2019/05/10 02:57

お世話になっております。先ほどは、質問の仕方等をご指摘してくださり、ありがとうございました。今回他の方の回答からうまく解決することができましたが、回答から、解決に至る道を作れたのは、「もう少しご自身で状況整理し、コンソールでエラーなど確認、デバッグを行って問題を絞ったうえで質問を調整してください。」こちらのアドバイスを頂けたからと思っております。この度はありがとうございました。

m.ts10806

2019/05/10 02:58

今後のヒントになったようで何よりです。

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

回答1件

ベストアンサー

リセットだけ見ましたが普通にリセットされますよ
ただし、ソースで指定されるようなチェックボックスがそもそも見当たらないのですが？
見る限りリセットなのだからformにぶっこんで
<input type="reset" value="リセット">
するほうが確実だと思いますけどね・・・

HTML
1<form>
2<div id="page">
3<div class="serchBox">
4<select name="region">
5<option value="">地域を選択</option>
6<option value="matudo">松戸市</option>
7<option value="chiba">千葉市</option>
8<option value="katuura">勝浦市</option>
9<option value="abiko">我孫子市</option>
10<option value="okashiwa">柏市</option>
11</select>
12<button id="search">検索</button>
13<input type="reset" value="リセット">
14</div>
15<ul class="list">
16<li>
17<p class="region"><span class="matudo">松戸市</span></p>
18</li>
19</ul>
20</div>
21</form>

filter_list()についてはlistsがなにかわからないので確認しようがありません

投稿2019/05/10 02:13

yambejp

総合スコア114736

satoru225Simple

2019/05/10 02:20

ご返答してくださり、ありがとうございます。ソースコードに不備があり、申し訳ございません。質問内容に書かれているjsのソースと、実装したい内容を修正いたしました。現状起きている内容としましては、「現状リセットボタンを押しても、プルダウンが「地域を選択」と初期化されるだけで、ロード時に表示されている要素は消えたままになる。」となります。そのため、リセットを押すことで、ロード時の「松戸市」が表示されている状態にしたいと思っております。何卒宜しくお願い致します。

yambejp

2019/05/10 02:24

function filter_list()のなかで $('#search').on('click', function() {・・・を実行していますが、これはリセットボタンを押すたびに #searchのclick時の処理を追加しているに過ぎません追加だけして実行をしなければなにも発動しないでしょう

satoru225Simple

2019/05/10 02:29

ご返答ありがとうございます。そうしますと、 function filter_list()の中ではなく、別で $('#search').on('click', function() {・・・の処理を書けばいいということでしょうか？

satoru225Simple

2019/05/10 02:57 編集

「function filter_list()のなかで $('#search').on('click', function() {・・・を実行していますが、これはリセットボタンを押すたびに #searchのclick時の処理を追加しているに過ぎません追加だけして実行をしなければなにも発動しないでしょう」こちらの回答を基に、実行できるようにするため、一番初めの $(function() { $(document).on… の部分をbuttonをクリックしたら実行するように変更したことで、うまくいくようになりました。ありがとうございました！

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