Thursday, 15 April 2010

javascript - Add class to dropdown option -



javascript - Add class to dropdown option -

here html code

<select class="input" id="shopperlanguage" name="shopperlanguage"> <option selected="" value="ja_jp">日本語</option> <option value="en">english (international)</option> </select>

i want add together 2 classes each alternative when if value ja_jp need add together japimg class , if value en need add together engimg class option. value default set , can not access code need jquery or java script.

i have tried code adding classes when select ja_jp alternative dropdown. need add together without selecting drop downwards menu check value of alternative , add together 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 adding class when alternative containing value ja_jp selected. need add together classes checking alternative value.can using css status css check alternative value , add together css rules?

update simpler , faster solution:

$("#shopperlanguage option[value='ja_jp']").addclass("japimg");

( you don't need find here, cause can filter right selector )

old answer

forget other lines of javascript-code. utilize find options specific value:

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

edit: working jsfiddle

plus: isn't practice utilize option-value needs. makes style of dropdown depending on value, in case accidently want. in other cases might want separate values style. see 2nd illustration alternative solution. 2nd example using 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 data-attribute example

javascript jquery css

No comments:

Post a Comment