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

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

ただいまの
回答率

90.53%

  • JavaScript

    16322questions

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

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 187

syousyou

score 0

 前提・実現したいこと

現在、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」のソースも記載しました。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

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

$(function(){
  $('[name=type]').on('change',function(){
    $('.subbox').prop('disabled',true).hide();
    $('#'+$(this).val()).prop('disabled',false).show();
  }).trigger('change');
});
<div class="searchBox">
<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>
</div>

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/12 15:17

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

    キャンセル

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

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16322questions

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