1

我有 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 item1中添加一个.blue类。

我曾经有复选框而不是下拉菜单，我有这个代码：

$(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/

4

6 回答 6

2

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

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

jsFiddle 演示

于 2012-06-26T13:17:43.307 回答
1

这是一个通用函数，它将所选选项的文本值添加到适当的 div：

$(document).ready(function($){

  $('select').change(function(){
    var s = $(this);
    var name = s.attr('name');
     $('.'+name).removeClass().addClass(name+' '+s.find(':selected').text().toLowerCase());
  });
});​

演示：http: //jsfiddle.net/jackwanders/xcEa9/4/

更一般地说，您可以使用 $.map 来获取选择菜单值的列表，以便您知道在每个更改事件上要删除哪些类名：

$('select').change(function(){
    var $this = $(this);
    var values = $.map($this.find('option'),function(opt){ return opt.value.toLowerCase(); }).join(' ');
    $('.'+this.name).removeClass(values).addClass($(this).val().toLowerCase());
});

演示：http: //jsfiddle.net/jackwanders/xcEa9/5/

于 2012-06-26T13:17:38.677 回答
0 
$(function() {
  $('select').bind('change', function() {
    var $this = $(this);
    $this.find('option:not(:selected)').each(function(index, option) {
      $this.removeClass($(option).text());
    });
    $this.addClass($this.find('option:selected').text());
  });        
});

更新了 JSFiddle

于 2012-06-26T13:38:03.030 回答
0 
$(document).ready(function() {

  $('#item1').change(function() {
    $('.item1').addClass($('#item1').val());
  });

  $('#item2').change(function() {
    $('.item2').addClass($('#item2').val());
  });

  $('#item3').change(function() {
    $('.item3').addClass($('#item3').val());
  });

});

如果愿意，您还可以将各个段保留在 for 循环中。

于 2012-06-26T13:17:57.393 回答
0

这将适用于您的所有select元素。

jsFiddle 演示

$('select[name^=item]').change(function(){
    var val = $(this).val();
    $('div.'+$(this).attr('name')).removeClass('red blue green').addClass(val);
});

select[name^=item]搜索名称以开头的选择元素item

于 2012-06-26T13:20:31.190 回答
0

这将清除类中先前设置的颜色值（如果有）并设置新的颜色值。

$(document).ready(function($){
    $('select').change(function(){
        name = $(this).attr('name');
        curClass = $('div.'+name).attr('class');
        $('div.'+name).removeClass(curClass).addClass(name + ' ' +$(this).val());
    });
});

小提琴 在这里

于 2012-06-26T14:03:33.350 回答