Question

这是我的HTML代码

<select class="input"  id="shopperlanguage" name="shopperlanguage">
<option selected="" value="ja_JP">日本語</option>
<option value="en">English (International)</option>
</select>

我想为每个选项添加两个类，比如当值为ja_JP时需要添加japImg类，如果值需要将engImg类添加到该选项。默认设置值，我无法访问我需要通过jquery或java脚本执行的代码。

我尝试过这段代码，但只有当我从下拉列表中选择ja_JP选项时才会添加类。我需要添加它而不选择下拉菜单只需检查选项的值并添加该类。

<script  type="text/javascript">
 var e = document.getElementById("shopperlanguage"); 
 var strUser = e.options[e.selectedIndex].value;
 if(strUser=="ja_JP"){
 $("#shopperlanguage").find("option").addClass("japimg");
 </script>

此代码仅在选择包含值ja_JP的选项时才添加类。我需要通过检查选项值来添加类。可以使用css来执行此操作，就像任何条件都是css来检查选项值并添加css规则一样吗？

Answer 1

<强>更新
更简单，更快速的解决方案：

$("#shopperlanguage option[value='ja_JP']").addClass("japimg");

（此处不需要find，因为您可以使用正确的选择器来过滤所有内容

旧回答

忘记你的其他javascript代码行。只需使用它来查找具有特定值的选项：

 $("#shopperlanguage").find("option[value='ja_JP']").addClass("japimg");

编辑：JSFiddle

plus：根据您的需要使用option - 值不是一个好习惯。它使你的下拉样式取决于价值，在你的情况下，你可能会意外地成为你想要的。在其他情况下，您可能希望将值与样式分开。看看我的第二个例子是另一种解决方案。

第二个例子
使用data属性html：

<select class="input" id="shopperlanguage" name="shopperlanguage">
    <option value="en">English (International)</option>
    <option selected="" value="ja_JP" data-red="1">日本語</option>
    <option value="en" data-red="1">English (International)</option>
    <option selected="" value="ja_JP">日本語</option>
</select>

javascript部分：

 $("#shopperlanguage").find("option[data-red=1]").addClass("japimg");

和：JSFiddle for data-attribute example

Answer 2

＆＃13;

/* map of class names to apply */
var _class = {
  'ja_JP': 'japImg',
  'en': 'engImg'
};

$(function(){
  $('#shopperlanguage').find('option').addClass(function() {
    return _class[this.value] || '';//<-- apply class here
  });
});

＆＃13;

.japImg{
  color: blue;
}
.engImg {
  color: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="input" id="shopperlanguage" name="shopperlanguage">
  <option selected="" value="ja_JP">日本語</option>
  <option value="en">English (International)</option>
</select>

＆＃13;

将类添加到下拉选项

2 个答案: