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:

http://jsfiddle.net/uJcB7/24/

InformationsquelleAutor user1482757 | 2012-06-26

Schreibe einen Kommentar