jQuery要素 + <select></select>タグの追加

絞り込みのボタン部分をセレクトタグにしたいのですが、
どなたかわかる方がいましたら教えてください。


＜↓下記のようなセレクトタグを追加したいです＞
---------------------------------------------
<select>
<option value="javascript:refresh();">全て</option>
<option value="">イヌ</option>
<option value="">ネコ</option>
<option value="">トリ</option>
</select>
---------------------------------------------


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script type="text/javascript">

$(function() {
$("#tags span").click(function() {
var tags = $(this).attr('id');
$("#tags span").removeClass('select');
$(this).addClass('select');
$("#animal div").hide();
if(tags == 'dogs') {
$("#animal .dog").show();
} else if(tags == 'cats') {
$("#animal .cat").show();
} else if(tags == 'birds') {
$("#animal .bird").show();
} else {
$("#animal div").show();
}
});
});
</script>

<div id="tags">
<span class="select"><button>全て</button></span>
<span id="dogs"><button>イヌ</button></span>
<span id="cats"><button>ネコ</button></span>
<span id="birds"><button>トリ</button></span>
</div>

<div id="animal">
<div class="cat"><img src="http://www.finefinefine.jp/wp/sample/images/cat1 …写真" width="250" height="188"></div>
<div class="dog"><img src="http://www.finefinefine.jp/wp/sample/images/dog1 …写真" width="250" height="188"></div>
<div class="bird"><img src="http://www.finefinefine.jp/wp/sample/images/bird …写真" width="250" height="188"></div>
<div class="dog"><img src="http://www.finefinefine.jp/wp/sample/images/dog2 …写真" width="250" height="188"></div>
<div class="bird"><img src="http://www.finefinefine.jp/wp/sample/images/bird …写真" width="250" height="188"></div>
<div class="cat"><img src="http://www.finefinefine.jp/wp/sample/images/cat2 …写真" width="250" height="188"></div>
<div class="bird"><img src="http://www.finefinefine.jp/wp/sample/images/bird …写真" width="250" height="188"></div>
<div class="cat"><img src="http://www.finefinefine.jp/wp/sample/images/cat3 …写真" width="250" height="188"></div>
<div class="dog"><img src="http://www.finefinefine.jp/wp/sample/images/dog3 …写真" width="250" height="188"></div>
<div class="cat"><img src="http://www.finefinefine.jp/wp/sample/images/cat4 …写真" width="250" height="188"></div>
<div class="bird"><img src="http://www.finefinefine.jp/wp/sample/images/bird …写真" width="250" height="188"></div>
</div>

質問者からの補足コメント

• 文字がバグってアップされてました。画像はこちらです
  http://www.finefinefine.jp/wp/sample/images/cat1 …

    補足日時：2015/02/10 00:22

No.1 ベストアンサー 回答者： DoubtOwl 回答日時： 2015/02/10 12:54

こんな感じでどうぞ

$(function() {
$("#selects").change(function() {
var tags = $(this + 'option:selected').val();
$("#animal div").hide();
if(tags == 'dogs') {
$("#animal .dog").show();
} else if(tags == 'cats') {
$("#animal .cat").show();
} else if(tags == 'birds') {
$("#animal .bird").show();
} else {
$("#animal div").show();
}
});
});
</script>

<select id="selects">
<option value="all">全て</option>
<option value="dogs">イヌ</option>
<option value="cats">ネコ</option>
<option value="birds">トリ</option>
</select>

この回答へのお礼

すごいですね！感動しました。
素晴らしいご回答誠にありがとうございました。

もしおわかりであれば教えていただきたいのですが、
下記のindex.htmlにselect button.html を追加できるのでしょうか？
(試してみましたが、動きませんでした。。)

http://xfs.jp/tdevx

お礼日時：2015/02/11 10:09