質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

705閲覧

javasprictの絞り込み検索について

sembokulove

総合スコア76

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

0クリップ

投稿2019/01/11 10:37

プルダウンで絞り込み検索って言うのをやりたいです。でっjavasprctをhtmlないに埋め込む方法でやりましたがなぜか正常に表示されません。どうしてでしょうか。
http://cly7796.net/wp/sample/implement-the-process-of-narrowing-down-the-list/index2.html
このページが完成形です。
下が僕がやったものです。

<div class="serchBox"> <select name="type"> <option value="">種類を選択</option> <option value="mammals">哺乳類</option> <option value="reptiles">爬虫類</option> <option value="birds">鳥類</option> <option value="other">その他</option> </select> <select name="live"> <option value="">生活を選択</option> <option value="water">水中</option> <option value="land">陸上</option> <option value="water-and-land">水中と陸上</option> <option value="sky">空</option> </select> <select name="color"> <option value="">色を選択</option> <option value="black">黒系</option> <option value="white">白系</option> <option value="green">緑系</option> <option value="brown">茶系</option> </select> <select name="size"> <option value="">大きさを選択</option> <option value="small">小さい</option> <option value="middle">中くらい</option> <option value="large">大きい</option> </select> <select name="name"> <option value="">名前を選択</option> <option value="dog">イヌ</option> <option value="cat">ネコ</option> <option value="monkey">サル</option> <option value="dolphin">イルカ</option> <option value="jellyfish">クラゲ</option> <option value="penguin">ペンギン</option> <option value="turtle">カメ</option> <option value="redstart">ジョウビタキ</option> <option value="myna">九官鳥</option> <option value="butterfly">蝶</option> <option value="crocodile">ワニ</option> </select> </div> <ul class="list"> <li> <img src="01.jpg" width="240" height="155"> <p class="name">名前:<span class="dolphin">イルカ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="water">水中</span></p> <p class="color">色:<span class="black">黒系</span></p> <p class="size">大きさ:<span class="large">大きい</span></p> </li> <li> <img src="02.jpg" width="240" height="155"> <p class="name">名前:<span class="jellyfish">クラゲ</span></p> <p class="type">種類:<span class="other">その他</span></p> <p class="live">生活:<span class="water">水中</span></p> <p class="color">色:<span class="white">白系</span></p> <p class="size">大きさ:<span class="small">小さい</span></p> </li> ・ ・ ・ <li> <img src="14.jpg" width="240" height="155"> <p class="name">名前:<span class="dog">イヌ</span></p> <p class="type">種類:<span class="mammals">哺乳類</span></p> <p class="live">生活:<span class="land">陸上</span></p> <p class="color">色:<span class="brown">茶系</span></p> <p class="size">大きさ:<span class="middle">中くらい</span></p> </li> </ul> <script type="text/javascript"> $(function() { var lists = $('.list li'); $(document).on('change', '.serchBox select', function() { lists.show(); for (var i = 0; i < $('.serchBox select').length; i++) { // 絞り込みの項目を取得 var item = $('.serchBox select').eq(i).attr('name'); // 絞り込みの対象を取得 var target = $('.serchBox select').eq(i).val();
if(target != '') { for (var j = 0; j < lists.length; j++) { // 絞り込み対象でない場合は非表示 if(!lists.eq(j).find('.' + item).find('span').hasClass(target)) { lists.eq(j).hide(); } }; } }; });

});
</script>

bochan2👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

質問のコードをそのままコピペして動いたんで、多分できてない原因はjQueryを読み込んでないこと

html

1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 2

を適当なとこに入れてください
(これは参考サイトからもってきたものです)

投稿2019/01/16 05:43

papinianus

総合スコア12705

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問