将类添加到select元素的选定选项

为了演示我甚至可以在选项elem上使用Class属性，我尝试将类属性添加到静态页面中的select elem选项，并且工作正常。我注意到没有很多在线资源记录这个，所以我想我会明确地设置记录。将类添加到select元素的选定选项

这里是jQuery代码试图将类添加到所选择的选项

ChangeDdlItemBG : function(obj, compLev) 
{ 
    var ddl = $(obj); 
    var index = ddl.attr('selectedIndex'); 
    switch(compLev) 
    { 
     case ComplianceLevel.Compliant : 
      $(ddl.attr('id') + ': selected').addClass('Compliant'); 
      break; 
     case ComplianceLevel.OtherThanSerious : 
      $(ddl.attr('id') + ': selected').addClass('OtherThanSerious'); 
      break; 
     case ComplianceLevel.Serious : 
      $(ddl.attr('id') + ': selected').addClass('Serious'); 
      break; 
     case ComplianceLevel.Critical : 
      $(ddl.attr('id') + ': selected').addClass('Critical'); 
      break; 
    } 
} 

var ComplianceLevel = 
{ 
    Compliant : function() { return 0; }, 
    OtherThanSerious : function() { return 1; }, 
    Serious : function() { return 2; }, 
    Critical : function() { return 3; }, 
};

新的信息，我发现原因没有发生在价值一个简单的错误传递在compLev的。但是，现在它通过正确大小写的代码运行，并且对该项目的颜色没有任何影响。

来源

2010-11-16 Feisty Mango

所以这不是一个问题。 – shoebox639 2010-11-16 20:09:35

我很抱歉，这是一个问题......上面贴出的代码并不符合我的预期。这些类声明了背景颜色规则来更改所选项目的背景颜色。我是否需要回发才能显示？ – 2010-11-16 20:12:24

@Mthethew您需要在SELECT元素的change事件上运行该函数。在这种情况下，您不需要传入对该元素的引用，因为'this'值指向它。 – 2010-11-16 20:33:29

你当然可以减少冗余。

而且，你必须运行的功能，为了它们的返回值与compLev比较：

function(obj, compLev) { 

    var optClass = ""; 

    switch (compLev) { 
    case ComplianceLevel.Compliant() : 
     optClass = 'Compliant'; 
     break; 
    case ComplianceLevel.OtherThanSerious() : 
     optClass = 'OtherThanSerious'; 
     break; 
    case ComplianceLevel.Serious() : 
     optClass = 'Serious'; 
     break; 
    case ComplianceLevel.Critical() : 
     optClass = 'Critical'; 
     break; 
    } 

    $(obj).find("option:selected").addClass(optClass).siblings().removeClass(); 

}

来源

2010-11-16 20:20:48

所以这个想法是将事件绑定到select elm然后在回调函数中执行更改？ – 2010-11-16 20:39:10

也铭记在心，我在select elm的onchange事件中为标记运行函数。我只是不认为这是必要的代码发布。 – 2010-11-16 20:39:58

@Mthethew您是否希望只有选定的选项才具有类别设置？或者每个选项？ – 2010-11-16 20:43:23

它看起来像你的选择器有一个错字。除非ddl.attr('id')是一种元素，否则您的代码不会将类添加到任何内容中。我想你想要$('#' + ddl.attr('id') + ':selected')

来源

2010-11-16 20:15:55 shoebox639

我最初尝试过你的风格。它会产生一个语法异常。 – 2010-11-16 20:45:36

将类添加到select元素的选定选项

回答

相关问题