クラスドロップダウンとチェックボックスの両方を一緒に選択すると変更されます

Question

<form id="xyz" class="checkbox-form"> 
    <input class="chk" type="checkbox" id="a" value=""> 
    <label for="a" class="checkbox-inline">Apple</label> 

    <input class="chk" type="checkbox" id="b" value=""> 
    <label for="b" class="checkbox-inline">Banana</label> 

    <input class="chk" type="checkbox" id="c" value="" > 
    <label for="c" class="checkbox-inline">Carrot</label> 

    <select name="Select Shop" id="shoplist"> 
     <option value="s01">shop1<option> 
     <option value="s02">shop2<option> 
     <option value="s03">shop3<option> 
    </select> 

    <select name="Select City" id="citylist"> 
     <option value="c01">city1<option> 
     <option value="c02">city2<option> 
     <option value="c03">city3<option> 
    </select> 
</form> 
<div class="a b city1 shop2">xyz...<div> 
<div class="c b city2 shop1">xyz...<div> 
<div class="a c city3 shop1">xyz...<div> 
<div class="b a city2 shop2">xyz...<div> 

これで、上記のクラスがフォームで選択されているdivのみを表示します。例えば、 。私は、ドロップダウンから選択したクラスa、cチェック、シティ3、ショップ1のdivを表示したい。すべてのdivを非表示にして3番目のものを表示します

Answer 1

これで、スタイリングクラスと静的クラスのメインクラス以外のdivのすべてのクラスを表示しないようにする必要があります。だから、表示なしを持つべきではない

<div class="a b city1 shop2 a-static b-static city1-static shop2-static mainStyleClass">xyz...<div> 

ここ

a、b、city1とshop2にあなたのdivを変更し、これらのクラスは、以下のコードによって除去されると、divが表示されるようになります。

チェックボックスのメソッド例。同様の行でドロップダウンを簡単にする必要があります。

$('.checkbox-inline').change(function() { 
    if(this.checked) { 
     $('div.' + $(this).text()).removeClass($(this).text()); 
    } 
    else { 
     $('div.' + $(this).text() + '-static').addClass($(this).text()); 
    } 
}); 

Answer 2

まず、divタグを正しく閉じる必要があります。

1. チェックボックスごとにクラスのリストを取得し、入力選択を選択します。

   次に、以下のロジックで望ましい結果を得ることができます。

2. すべてを非表示
3. これらの選択されたクラスとクラスの数がすべて選択されているdivを表示します。

以下のコードを確認してください。お役に立てれば！

$(document).ready(function() { 
 
    $("div").hide(); 
 
    var elems = $('.chk,#citylist,#shoplist'); 
 
    elems.on('change', function() { 
 
    var arr = []; 
 
    $.each(elems, function(i, e) { 
 
     var elem = $(e); 
 
     var val; 
 
     if (elem.is("select")) { 
 
     val = elem.find("option:selected").text(); 
 
     } else if (elem.is("input[type='checkbox']")) { 
 
     val = elem.is(":checked") ? elem.attr("id") : ""; 
 
     } 
 

 
     if (val) { 
 
     arr.push(val); 
 
     } 
 

 
    }); 
 

 
    $.each($("div"), function(i, e) { 
 
     var hasCl = true; 
 
     $.each(arr, function(k, c) { 
 
     if (!$(e).hasClass(c)) { 
 
      hasCl = false; 
 
     } 
 
     }); 
 
     if (hasCl) { 
 
     $(e).show(); 
 
     } else { 
 
     $(e).hide(); 
 
     } 
 
    }); 
 

 
    }); 
 
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
<form id="xyz" class="checkbox-form"> 
 
    <input class="chk" type="checkbox" id="a" value=""> 
 
    <label for="a" class="checkbox-inline">Apple</label> 
 

 
    <input class="chk" type="checkbox" id="b" value=""> 
 
    <label for="b" class="checkbox-inline">Banana</label> 
 

 
    <input class="chk" type="checkbox" id="c" value=""> 
 
    <label for="c" class="checkbox-inline">Carrot</label> 
 

 
    <select name="Select Shop" id="shoplist"> 
 
     <option value="s01">shop1<option> 
 
     <option value="s02">shop2<option> 
 
     <option value="s03">shop3<option> 
 
    </select> 
 

 
    <select name="Select City" id="citylist"> 
 
     <option value="c01">city1<option> 
 
     <option value="c02">city2<option> 
 
     <option value="c03">city3<option> 
 
    </select> 
 
</form> 
 

 
<div class="a b city1 shop2">xyz...1</div> 
 
<div class="c b city2 shop1">xyz...2</div> 
 
<div class="a c city3 shop1">xyz...3</div> 
 
<div class="b a city2 shop2">xyz...4</div>

P.S. ：あなたが試みたコードを質問に追加することが期待されています！