Klasse Ändern bei der Auswahl Dropdown und Kontrollkästchen beide zusammen

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> 

Jetzt möchte ich nur diejenigen divs zeigen, die die oben genannte Klasse im Formular ausgewählt haben. z. Ich möchte divs mit der Klasse a, c checked und city3 und shop1 aus dem Dropdown-Menü anzeigen lassen. dann verstecken sie alle divs und zeigen nur die dritte

Answer 1

In diesem sollten Sie keine Anzeige für alle Klassen für das div außer die Hauptklasse für Styling und statische Klassen geben. Also Ihr div ändern

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

Hier a, b, city1 und shop2 sollte Anzeige keine haben, und sobald diese Klassen unten durch den Code entfernt werden, beginnt die div zeigt.

Eine Beispielmethode für das Kontrollkästchen. Drop-down sollte auf ähnliche Weise einfach sein.

Answer 2

Zuerst müssen Sie die div Tags richtig schließen.

Dann kann das gewünschte Ergebnis in folgenden Logik erhalten:

1. die Liste der Klassen pro Checkbox Erhalten und Eingangswahl wählen.
2. Alle divs ausblenden
3. Zeigen Sie das div, das alle diese ausgewählten Klassen enthält, und die Anzahl der Klassen ist die gleiche wie die ausgewählte Klasse.

Überprüfen Sie den folgenden Code. Hoffe das hilft!

$(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. : Es wird erwartet, dass Sie den Code hinzufügen, den Sie in der Frage versucht haben!