jQuery hinzufügen einer css-Klasse abhängig davon, selectbox option
Ich habe 3 dropdown, wo ich will, um eine Klasse zu einem bestimmten div-je nach dem Wert von der dropdown-Liste.
<select name="item1">
<option>Blue</option>
<option>Green</option>
<option>Red</option>
</select>
<select name="item2">
<option>Blue</option>
<option>Green</option>
<option>Red</option>
</select>
<select name="item3">
<option>Blue</option>
<option>Green</option>
<option>Red</option>
</select>
<div class="product">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
Ich versuche, fügen Sie eine css-Klasse abhängig vom Wert einer dropdown-Box.
Zum Beispiel, wenn die option blau aus der dropdown - item1 ausgewählt ist, möchte ich hinzufügen, eine Klasse .blau div item1.
Früher habe ich Checkboxen anstelle von dropdown-und ich hatte diesen code:
$(document).ready(function($){
$('input#red').change(function(){
if($(this).is(":checked")) {
$('div.item1').addClass("red");
} else {
$('div.item1').removeClass("red");
}
});
$('input#blue').change(function(){
if($(this).is(":checked")) {
$('div.item1').addClass("blue");
} else {
$('div.item1').removeClass("blue");
}
});
});
Habe ich diese: http://jsfiddle.net/uJcB7/14/
Wie funktioniert sollte richtig gemacht werden?
------------BEARBEITEN-----------
Ich bin mit Schwerkraft Formen zu generieren, wählen Sie das Kontrollkästchen, und Sie werden den Zusatz "|0" nach dem Namen der option (ich weiß nicht, warum!).
Beispielsweise "grün|0" statt "grün". Die "|0" ist versteckt im Feld, aber die Klasse erzeugt wird, ist der "green|0".
Jeder Gedanke, der, wie zu entfernen das "|0" auf der css-Klasse?
Außerdem erzeugen Sie einen Namen für die selectbox, ist es möglich, mit einer Klasse statt mit dem Namen element?
Haben Sie einen Blick auf den aktualisierten code:
InformationsquelleAutor user1482757 | 2012-06-26
Du musst angemeldet sein, um einen Kommentar abzugeben.
Klasse der
<div>
hinzufügen, das die Klasse ist die gleiche wie diename
Eigenschaft des<select>
element geändert wird, und den Namen der Klasse hinzufügen, wird die Kleinbuchstaben version des Wertes der gewählten option. Mit dem im Verstand, das funktioniert:jsFiddle DEMO
Es auch hardcodes die Klasse, die Namen zu entfernen, so OP wird sich merken müssen, aktualisieren Sie diese Funktion, wenn die Werte des ausgewählten Menüs ändern
Ich konnte nicht entscheiden, auf die beste Methode, das zu umgehen, aber jetzt haben. Ich habe bearbeitet den code, so dass, anstatt das hinzufügen/entfernen von bestimmten Klassen, es einfach überschreibt die class-Attribut mit dem gewünschten neuen Klassen - itemX und rot/blau/grün.
das ist, was ich hatte in meiner ersten Lösung; im Grunde zurücksetzen der Klasse. Allerdings, wenn das div-Element sieht aus wie
<div class="item 1 rounded-corners">
, dann verlieren Sie dierounded-corners
Klasse. deshalb ließ ich mich auf die Verwendung von $.Karte, um die option alle WerteVorausgesetzt, die HTML verwenden, tatsächlich aussieht wie die HTML in Frage, das wäre nicht ein Problem in diesem speziellen Fall. Im Allgemeinen, jedoch, Sie sind richtig;
$.map()
wäre die allgemeinere Lösung.InformationsquelleAutor Anthony Grist
Hier ist eine Allgemeine Funktion, fügen Sie den text-Wert der ausgewählten option aus, um die entsprechenden div:
Demo: http://jsfiddle.net/jackwanders/xcEa9/4/
Sogar mehr im Allgemeinen können Sie $.anzeigen erhalten Sie eine Liste von select-Menü die Werte, so dass Sie wissen, welche Klasse Namen zu entfernen, die bei jedem change-Ereignis:
Demo: http://jsfiddle.net/jackwanders/xcEa9/5/
this
(die<select>
element, das das Ereignis ausgelöst hat).InformationsquelleAutor jackwanders
Können Sie auch halten die einzelnen Segmente innerhalb der for-Schleife, wenn Sie mögen.
InformationsquelleAutor user1321375
Aktualisiert JSFiddle
InformationsquelleAutor amiuhle
Dadurch wird der zuvor eingestellte Wert "Farbe" in der Klasse (falls vorhanden) und setzt den neuen ein.
Fiedel Hier
InformationsquelleAutor SuperMykEl
Diese wird die Arbeit für alle Ihre
select
Elemente.jsFiddle demo
select[name^=item]
Sucht für ein select-element das name beginnt mititem
green
und schalten Sie dann den Wert wieder aufred
oderblue
weil die.green
CSS-Deklaration Vorrang vor der anderen. Auch, wie mit jackwanders Antwort, deutlich mehr jQuery als erforderlich.Vielen Dank für den Hinweis. Korrigiert!
InformationsquelleAutor Roko C. Buljan