絞込機能を実装したいと考えています。
<select>タグの中の<option>をclickすると、
対応した項目を絞りこんで表示したいのですが、
ChromeとSafariで反応がありません。
ブラウザのバージョンは最新です。
firefoxではきちんと思い通りの動きになりました。
また、<option>を<button>にすると、全てのブラウザで動きました。
何が原因か分からず困っております。お力お貸しください、、

試したcode【<select>タグ】
https://jsfiddle.net/shiosu/kdugjaLz/

試したcode【<button>タグ】
https://jsfiddle.net/shiosu/y03b922u/

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="Content-Script-Type" content="text/javascript">
6<title>タグごとに表示</title>
7<link rel="stylesheet" href="css/style.css">
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
9<script src="js/script.js"></script>
10</head>
11
12<body>
13	<div id="wrapper">		
14    <select>
15      <option value="all">All</option>
16      <option value="red">Red</option>
17      <option value="blue">Blue</option>
18      <option value="yellow">Yellow</option>
19      <option value="gray">Gray</option>
20    </select>
21
22		<ul id="list">
23			<li class="red"></li>
24			<li class="gray"></li>
25			<li class="yellow"></li>
26			<li class="blue"></li>
27			<li class="gray"></li>
28			<li class="red"></li>
29			<li class="blue"></li>
30			<li class="yellow"></li>
31			<li class="red"></li>
32			<li class="gray"></li>
33			<li class="yellow"></li>
34			<li class="blue"></li>
35		</ul>
36	</div>
37
38</body>
39</html>

css
1@charset "UTF-8";
2body {
3  font-family: Arial, sans-serif;
4  -webkit-font-smoothing: antialiased;
5  background: #e9eceb;
6}
7
8#wrapper {
9  width: 1000px;
10  margin: 0 auto;
11  margin-top: 50px;
12  text-align: center;
13}
14
15/* リスト ============================= */
16#list {
17  margin-right: -20px;
18  padding-top: 50px; 
19}
20
21#list li {
22  margin-right: 20px;
23  margin-bottom: 25px;
24  width: 150px;
25  height: 150px;
26  list-style-type: none;
27  float: left;
28}
29
30#list li.red {
31  background: red;
32}
33
34#list li.blue {
35  background: blue;
36}
37
38#list li.yellow {
39  background: yellow;
40}
41
42#list li.gray {
43  background: gray;
44}

js
1$(function(){
2  $('option').click(function(){
3    var target = $(this).attr('value');
4
5    $('#list li').each(function(){
6      $(this).animate({'opacity' : 0}, 300, function(){
7        $(this).hide();
8
9        if($(this).hasClass(target) || target == 'all') {
10          $(this).show();
11          $(this).animate({'opacity' : 1}, 300);
12        }
13      });
14    });
15  });
16});

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

回答1件

ベストアンサー

セレクトボックスのoptionですよね？
セレクトボックス自体のchangeイベントを拾ってはいけないのですか？

sample

念の為こんな感じです
(今回はanimate処理は飛ばしました)

javascript
1$(function(){
2  $('select').on('change',function(){
3    var target = $(this).val();
4
5    $('#list li').hide().filter(function(){
6      return $(this).hasClass(target) || target == 'all';
7    }).show();
8  }).trigger('change');
9});

HTML
1<select>
2<option value="all">All</option>
3<option value="red">Red</option>
4<option value="blue">Blue</option>
5<option value="yellow">Yellow</option>
6<option value="gray">Gray</option>
7</select>
8<ul id="list">
9<li class="red">r1</li>
10<li class="gray">g1</li>
11<li class="yellow">y1</li>
12<li class="blue">b1</li>
13<li class="gray">g2</li>
14<li class="red">r2</li>
15<li class="blue">b2</li>
16<li class="yellow">y2</li>
17<li class="red">r3</li>
18<li class="gray">g3</li>
19<li class="yellow">y3</li>
20<li class="blue">b3</li>
21</ul>

投稿2018/04/10 03:41

編集2018/04/10 04:00

yambejp

総合スコア114829

shiosu

2018/04/10 03:49

ご回答ありがとうございます！すいません、まだまだ初心者でして、、 changeイベントという別の方法があるのですね！本のサンプルを見て先に<button>タグのものを作成しました。なので、単純に考えて『’button’』を『’option’』に変えればいいのかと考えてしまい、こうなった次第です、、調べてみます > <