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

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

ただいまの
回答率

90.38%

  • JavaScript

    21546questions

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

  • jQuery

    8566questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    5449questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

option valueに複数の値を入れ、絞り込み検索できるようにしたい

解決済

回答 2

投稿 編集

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

実現したいこと

js・jqueryによる絞り込みを行う際に、
<select>内のoption valueに複数の値を入れ、
どちらかの値に一致していれば、
表示するようにしたいです。

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

エラーは特に出ておりません。

該当のソースコード

<html lang="ja">
<head>
<title>HTML, CSS and JavaScript demo</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="function.js"></script>

</head>
<body>
<div class="serchBox">
  <select name="region">
    <option value="">地域を選択</option>
    <option value="matudo,all">松戸市</option>
    <option value="chiba">千葉市</option>
    <option value="katuura">勝浦市</option>
    <option value="abiko">我孫子市</option>
    <option value="okashiwa">柏市</option>
  </select>
  <button id="search">検索</button>
  <button id="reset">リセット</button>
</div>

<div class="list" data-tiiki='["all"]'>松戸市
</div>
  <div class="list" data-tiiki='["matudo"]'>松戸市
</div>
</body>
</html>
$(function() {
    var lists = $('.list');
    $(document).on('click', 'button', function() {  filter_list();
    });

    // リセットボタンをクリックしたときの処理
    $('#reset').on('click', function() {
        // フォームのselectとcheckboxをリセット
        $('.serchBox select').val('');
        // リストの絞り込みをリセット
        filter_list();
    });
      function filter_list() {
        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).data('tiiki').indexOf(target) === -1) {
                     lists.eq(j).hide();
                                        }
                };
            }
        };
      }
    });

試したこと

<option value="matudo">松戸市</option>
上記のソースコードを
<option value="matudo,all">松戸市</option>
という形で、,で区切って、2つの値を入れ、

jsで絞りこみをしたときに、
<div class="list" data-tiiki='["all"]'>松戸市
</div>
<div class="list" data-tiiki='["matudo"]'>松戸市
</div>
上記2つどちらとも表示されるようにならないか
試してみましたが、
うまくいきませんでした。

何卒宜しくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2019/05/21 17:44

    タグにjQueryを追加しておいてください。

    キャンセル

  • satoru225Simple

    2019/05/21 17:49

    失礼いたしました。
    追加させていただきました!

    キャンセル

回答 2

checkベストアンサー

+2

<script>
$(function(){
  $('[name=region]').on('change',function(){
    var vals=$(this).val().split(",");
    $('.list').hide().filter(function(){
      return $(this).data("tiiki").some(function(x){
        return vals.indexOf(x)>-1;
      });
    }).show();
  }).trigger('change');
});
</script>

<div class="serchBox">
  <select name="region">
    <option value="">地域を選択</option>
    <option value="all">ALL</option>
    <option value="matudo">松戸のみ</option>
    <option value="matudo,all">松戸・ALL</option>
    <option value="chiba">千葉市</option>
    <option value="katuura">勝浦市</option>
    <option value="abiko">我孫子市</option>
    <option value="okashiwa">柏市</option>
  </select>
  <button type="button" id="search">検索</button>
  <button type="button" id="reset">リセット</button>
</div>

<div class="list" data-tiiki='["all"]'>松戸市</div>
<div class="list" data-tiiki='["matudo"]'>松戸市</div>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/21 18:23

    ご返答ありがとうございます。
    ソースコードまで書いていただいて、
    ありがたいのですが、
    こちら、コードペンでそのまま記載して試したところ、
    うまくいきませんでした。
    元々の自分のソースコードにこちらを追記するということでしょうか?
    知識が乏しく申し訳ありません。
    何卒宜しくお願い致します

    キャンセル

  • 2019/05/21 18:29

    > 元々の自分のソースコードにこちらを追記する

    いえ、置き換えてください
    というかまるっとコピペして動作を確認してください

    キャンセル

  • 2019/05/21 18:38

    こちら、アドバイス通り、コピペして動作確認したら、
    うまくいきました!
    ありがとうございます!

    キャンセル

0

$('.serchBox select').eq(i).val()で取得できる値は、「matudo,all」と思います。
data-tiikiに設定されている値は、「all」と「matudo」なので、「matudo,all」で検索してもヒットしません。(data-tiikiに「matudo,all」と設定されている場合はヒットします)
やりたいことを実現するにはdata-tiikiに設定されている値に合うように、「matudo,all」をカンマで分割してそれぞれ検索してあげるとよいと思います。
stringのsplit()というfunctionを使うと、引数に指定した区切り文字で分割した配列にすることができます。この配列の要素の数だけ、検索してあげるとよいかと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/21 18:27 編集

    ご返答ありがとうございます。
    この場合、
    js,jqueryのソースコード内の
    var target = $('.serchBox select').eq(i).val();
    にsplit(",")を付け足すのかなと
    考えて、実行してみたのですが、
    <div class="list" data-tiiki='["all"]'>松戸市
    </div>
    <div class="list" data-tiiki='["matudo"]'>松戸市
    </div>
    上記どちらとも表示されず、
    うまくいきませんでした。

    記載場所は自分の考えであっているでしょうか?
    何卒宜しくお願い致します

    キャンセル

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

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

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

  • JavaScript

    21546questions

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

  • jQuery

    8566questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    5449questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。