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

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

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

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

Q&A

1回答

3588閲覧

JavaScriptで2段階プルダウンによる検索結果の表示したい

syousyou

総合スコア4

JavaScript

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

0グッド

0クリップ

投稿2018/07/12 05:03

前提・実現したいこと

現在、JavaScriptにてプルダウン検索をから結果を表示する画面を作成しました。
ここに、もう一つプルダウンを追加して絞り込目るようにしたいです。
当方、JavaScriptおよびプログラミングについては完全な初心者です。

下記のプルダウンを大分類としてsubboxの情報を中分類で2段階のプルダウンにしたいです。

イメージ:
プルダウン1(大分類):サプリメント
プルダウン2(中分類):ビタミン~セサミン
結果:プルダウン1,2の結果を表示する。

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

なし

該当のソースコード

//ソースコード1 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>「リストを絞り込む処理を実装してみる」のデモページ2 | cly7796.net</title> <meta name="keywords" content="javascript,jQuery,絞り込み,選択,複数,デモページ2" /> <meta name="description" content="「リストを絞り込む処理を実装してみる」のデモページ2です。" /> <link rel="stylesheet" href="https://xxxxxxxxxx/xxxxxxxxxxx/sample.css" /> <script src="https://xxxxxxxxxx/xxxxxxxxxxx/jquery-3.3.1.min.js"></script> <script src="https://xxxxxxxxxx/xxxxxxxxxxx/sample.js"></script> <script src="https://xxxxxxxxxx/xxxxxxxxxxx/Analytics.css"></script> </head> <body> <div id="page"> <div class="serchBox"> <select name="type"> <option value="">カテゴリーを選択</option> <option value="Supplements">サプリメント</option> <option value="Hairtonic">育毛剤</option> <option value="shampoo">シャンプー</option> <option value="other">その他</option> </select> <select id="Supplements" class="subbox"> <option value="">種類を選択</option> <option value="vitamin">ビタミン</option> <option value="iron">鉄分</option> <option value="protein">タンパク質</option> <option value="amino acid">アミノ酸</option> <option value="calcium">カルシウム</option> <option value="calcium">ミネラル</option> <option value="sesamin">セサミン</option> </select> <select id="Hairtonic" class="subbox"> <option value="">育毛剤を選択</option> <option value="HairtonicA">育毛剤A</option> <option value="HairtonicB">育毛剤B</option> <option value="HairtonicC">育毛剤C</option> <option value="HairtonicD">育毛剤D</option> </select> <select id="shampoo" class="subbox"> <option value="">シャンプーを選択</option> <option value="shampooA">シャンプーA</option> <option value="shampooB">シャンプーB</option> <option value="shampooC">シャンプーC</option> </select> <select id="other" class="subbox"> <option value="">種類を選択</option> <option value="Gray hair dye">白髪染め</option> <option value="healthy food">健康食品</option> <option value="Health appliances">健康器具</option> <option value="Quasi-drugs">医薬部外品</option> <option value="book">書籍</option> </select> <script type="text/javascript"> // ▼HTMLの読み込み直後に実行: document.addEventListener('DOMContentLoaded', function() { // ▼2階層目の要素を全て非表示にする var allSubBoxes = document.getElementsByClassName("subbox"); for( var i=0 ; i<allSubBoxes.length ; i++) { allSubBoxes[i].style.display = 'none'; } }); </script> <script type="text/javascript"> // ▼HTMLの読み込み直後に実行: document.addEventListener('DOMContentLoaded', function() { // ▼全てのプルダウンメニューセットごとに処理 var mainBoxes = document.getElementsByClassName('serchBox'); for( var i=0 ; i<mainBoxes.length ; i++) { var mainSelect = mainBoxes[i].getElementsByClassName("serchBox"); // 1階層目(メイン)のプルダウンメニュー(※後でvalue属性値を参照するので、select要素である必要があります。) mainSelect[0].onchange = function () { // ▼同じ親要素に含まれているすべての2階層目(サブ)要素を消す var subBox = this.parentNode.getElementsByClassName("subbox"); // 同じ親要素に含まれる.subbox(※select要素に限らず、どんな要素でも構いません。) for( var j=0 ; j<subBox.length ; j++) { subBox[j].style.display = 'none'; } // ▼指定された2階層目(サブ)要素だけを表示する if( this.value ) { var targetSub = document.getElementById( this.value ); // 「1階層目のプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る targetSub.style.display = 'inline'; } } } }); </script> </div> <ul class="list"> <li> <!--<img src="01.jpg" width="240" height="155">--> <p class="name">製品名:<span class="vitamin">ビタミン剤</span></p> <p class="type">カテゴリー:<span class="Supplements">サプリメント</span></p> <p class="live">ドキュメント:<span class="water">有</span></p> <p class="color">約款:<span class="black">有</span></p> </li> <li> <!--<img src="02.jpg" width="240" height="155">--> <p class="name">製品名:<span class="book">書籍</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> </li> <li> <!--<img src="03.jpg" width="240" height="155">--> <p class="name">製品名:<span class="shampooA">シャンプーA</span></p> <p class="type">カテゴリー:<span class="shampoo">シャンプー</span></p> <p class="live">ドキュメント:<span class="water-and-land">有</span></p> <p class="color">約款:<span class="black">有</span></p> </li> <li> <!--<img src="04.jpg" width="240" height="155">--> <p class="name">製品名:<span class="HairtonicA">育毛剤A</span></p> <p class="type">カテゴリー:<span class="Hairtonic">育毛剤</span></p> <p class="live">ドキュメント:<span class="water-and-land">無</span></p> <p class="color">約款:<span class="green">有</span></p> </li> <li> <!--<img src="05.jpg" width="240" height="155">--> <p class="name">製品名:<span class="shampooB">シャンプーB</span></p> <p class="type">カテゴリー:<span class="shampoo">シャンプー</span></p> <p class="live">ドキュメント:<span class="sky">無</span></p> <p class="color">約款:<span class="brown">無</span></p> </li> <li> <!--<img src="06.jpg" width="240" height="155">--> <p class="name">製品名:<span class="iron">鉄分</span></p> <p class="type">カテゴリー:<span class="Supplements">サプリメント</span></p> <p class="live">ドキュメント:<span class="land">無</span></p> <p class="color">約款:<span class="brown">有</span></p> </li> <li> <!--<img src="07.jpg" width="240" height="155">--> <p class="name">製品名:<span class="Health appliances">健康器具</span></p> <p class="type">カテゴリー:<span class="other">その他</span></p> <p class="live">ドキュメント:<span class="sky">有</span></p> <p class="color">約款:<span class="black">無</span></p> </li> <li> <!--<img src="08.jpg" width="240" height="155">--> <p class="name">名前:<span class="calcium">カルシウム</span></p> <p class="type">カテゴリー:<span class="Supplements">サプリメント</span></p> <p class="live">ドキュメント:<span class="land">有</span></p> <p class="color">約款:<span class="black">無</span></p> </li> <li> <!--<img src="09.jpg" width="240" height="155">--> <p class="name">名前:<span class="mineral">ミネラル</span></p> <p class="type">カテゴリー:<span class="Supplements">サプリメント</span></p> <p class="live">ドキュメント:<span class="land">無</span></p> <p class="color">約款:<span class="black">有</span></p> </li> <li> <!--<img src="10.jpg" width="240" height="155">--> <p class="name">名前:<span class="HairtonicC">育毛剤C</span></p> <p class="type">カテゴリー:<span class="Hairtonic">育毛剤</span></p> <p class="live">ドキュメント:<span class="water-and-land">有</span></p> <p class="color">約款:<span class="green">有</span></p> </li> <li> <!--<img src="11.jpg" width="240" height="155">--> <p class="name">名前:<span class="sesamin">セサミン</span></p> <p class="type">カテゴリー:<span class="Supplements">サプリメント</span></p> <p class="live">ドキュメント:<span class="land">有</span></p> <p class="color">約款:<span class="brown">有</span></p> </li> <li> <!--<img src="12.jpg" width="240" height="155">--> <p class="name">名前:<span class="shampooC">シャンプーC</span></p> <p class="type">カテゴリー:<span class="shampoo">シャンプー</span></p> <p class="live">ドキュメント:<span class="sky">有</span></p> <p class="color">約款:<span class="black">無</span></p> </li> <li> <!--<img src="13.jpg" width="240" height="155">--> <p class="name">名前:<span class="amino acid">アミノ酸</span></p> <p class="type">カテゴリー:<span class="Supplements">サプリメント</span></p> <p class="live">ドキュメント:<span class="land">無し</span></p> <p class="color">約款:<span class="white">有</span></p> </li> <li> <!--<img src="14.jpg" width="240" height="155">--> <p class="name">名前:<span class="protein">タンパク質</span></p> <p class="type">カテゴリー:<span class="Supplements">サプリメント</span></p> <p class="live">ドキュメント:<span class="land">無</span></p> <p class="color">約款:<span class="brown">有</span></p> </li> </ul> </div> </body> </html>
//Sample.js $(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(); } }; } }; }); });

試したこと

補足情報(FW/ツールのバージョンなど)

素人のため、不足があるかもしれません。

OS:Windows10
ブラウザー:Google Crome(バージョン: 67.0.3396.99(Official Build) (64 ビット))
jquery-3.3.1.min.js
必要かわかりませんが、使用している「Sample.js」のソースも記載しました。

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

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

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

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

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

guest

回答1

0

とりあえずここまではOK?

javascript

1$(function(){ 2 $('[name=type]').on('change',function(){ 3 $('.subbox').prop('disabled',true).hide(); 4 $('#'+$(this).val()).prop('disabled',false).show(); 5 }).trigger('change'); 6});

HTML

1<div class="searchBox"> 2<select name="type"> 3<option value="">カテゴリーを選択</option> 4<option value="Supplements">サプリメント</option> 5<option value="Hairtonic">育毛剤</option> 6<option value="shampoo">シャンプー</option> 7<option value="other">その他</option> 8</select> 9<select id="Supplements" class="subbox"> 10<option value="">サプリメントを選択</option> 11<option value="vitamin">ビタミン</option> 12<option value="iron">鉄分</option> 13<option value="protein">タンパク質</option> 14<option value="amino acid">アミノ酸</option> 15<option value="calcium">カルシウム</option> 16<option value="calcium">ミネラル</option> 17<option value="sesamin">セサミン</option> 18</select> 19<select id="Hairtonic" class="subbox"> 20<option value="">育毛剤を選択</option> 21<option value="HairtonicA">育毛剤A</option> 22<option value="HairtonicB">育毛剤B</option> 23<option value="HairtonicC">育毛剤C</option> 24<option value="HairtonicD">育毛剤D</option> 25</select> 26<select id="shampoo" class="subbox"> 27<option value="">シャンプーを選択</option> 28<option value="shampooA">シャンプーA</option> 29<option value="shampooB">シャンプーB</option> 30<option value="shampooC">シャンプーC</option> 31</select> 32<select id="other" class="subbox"> 33<option value="">その他を選択</option> 34<option value="Gray hair dye">白髪染め</option> 35<option value="healthy food">健康食品</option> 36<option value="Health appliances">健康器具</option> 37<option value="Quasi-drugs">医薬部外品</option> 38<option value="book">書籍</option> 39</select> 40</div>

この上で、2つ目のセレクトボックスの値からlistを絞りこむ感じです

投稿2018/07/12 05:31

yambejp

総合スコア114572

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

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

syousyou

2018/07/12 06:17

回答いただきありがとうございます。 javascriptは置き換えました。 HTMLも置き換えればよろしのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問