jQuery 根据选择框选项添加 css 类

Question

我有 3 个下拉列表，我想根据下拉列表的值将类添加到特定的 div。

<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>

我正在尝试根据下拉列表的值添加一个 css 类。 例如，如果选择下拉列表 item1 中的选项 blue，我想向 div 添加一个类 .blue元素1。

我曾经使用复选框而不是下拉菜单，并且我有以下代码:

$(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");
        }
    });
});

我创建了这个:http://jsfiddle.net/uJcB7/14/ 应该如何正确完成？

------------编辑------------

我使用重力形式生成选择框，他们在选项名称后面添加“|0”(我不知道为什么!)。

例如“green|0”而不是“green”。 “|0”隐藏在字段中，但生成的类是“green|0”。

有没有想过如何删除 css 类上的“|0”？

他们还为选择框生成一个名称，是否可以使用类而不是使用名称元素？

查看更新后的代码:

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

Answer 1

<div> 的类添加类与 name 相同<select>的属性(property)正在更改的元素，并且要添加的类的名称是所选选项值的小写版本。考虑到这一点，这是有效的:

$(document).ready(function($){
    $('select').change(function(){
        $('.' + this.name).attr('class', this.name + ' ' + this.value.toLowerCase());
    });
});

jsFiddle DEMO