添加類到下拉選項

這裏是我的html代碼添加類到下拉選項

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

我想兩個類添加到每個選項就像當值是否爲Ja_JP表示則需要添加japImg類，如果值爲en需要添加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規則嗎？

來源

2014-11-14 user2787474

更新
更簡單和更快的解決方案：

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

（你不需要find這裏，因爲你可以用正確的選擇過濾了一切）

舊回答

忘記了你的其他線路的JavaScript代碼。簡單地使用它來查找選項與特定的值：

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

編輯：工作JSFiddle

加：它不使用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

來源

2014-11-14 09:51:23

@傑克引文：「我需要添加它而不選擇下拉菜單隻需選中選項的值，並添加類。」 –

是的;-)不理我 –

/* 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 
 
    }); 
 
});

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

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

來源

2014-11-14 10:10:25 Arvind

添加類到下拉選項

回答

相關問題