Add class to dropdown option

问题

Here is my html code

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

I want to add two classes to each option like when if value is ja_JP then need to add japImg class and if value is en need to add engImg class to that option. value is by default set and i can not access the code i need to do it by jquery or java script.

I have tried this code but its adding classes only when i select ja_JP option from dropdown. I need to add it without selecting drop down menu just check value of option and add that class.

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

this code is adding class only when that option containing value ja_JP is selected. I need to add classes just by checking the option value.Can i do this using css like any condition is css to check option value and add css rules?

回答1:

update
even simpler and faster solution:

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

( you don't need find here, cause you can filter it all just with the right selector )

old answer

forget your other lines of javascript-code. simply use this to find options with a specific value:

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

edit: working JSFiddle

plus: it isn't good practice to use the option-value for your needs. it makes the style of your dropdown depending on the value, which in your case could accidently be what you want. in other cases you might want to separate the values from your style. see my 2nd example for an alternative solution.

2nd example
using a data attribute, 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 part:

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

and: JSFiddle for data-attribute example

回答2:

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

来源：https://stackoverflow.com/questions/26927092/add-class-to-dropdown-option

标签

javascript

jquery

css