Setting Style/CSS of select options using jQuery
This is how i set style (color here) of all of the options of a select list using jQuery.
In my case i had select options like this:
<select id=”select_list_id”>
<option value=”#595959″>Grey</option>
<option value=”#000000″>Black</option>
<option value=”#036″>Blue</option>
<option value=”#363″>Green</option>
<option value=”#632423″>Red</option>
<option value=”#403152″>Purple</option>
<option value=”#E36C0A”>Orange</option>
</select>
Follwoing the jQuery code i used to set color of options above:
$(document).ready(function(){
$('#select_list_id option', this).each(
function () {
$(this).css({'color':$(this).val()});
}
)
});
Possibly Related posts:
- How to check radio button on page load with jQuery
For example you have a set of radio buttons created dynamically with some web language like PHP and you expected one of them selected or... - Fix to jQuery ui calendar not appearing from or hiding behind thickbox
If you are facing an issue of jQuery ui calendar not appearing while clicked from a jQuery thickbox or if some part of the calendar... - jQuery pop up message box sliding from left to right and positioning horizontally at the center
Just wrote a simple sliding box script to make a message box appear sliding from left to the middle of web page. The box appears... - How to position a pop up element on mouse position coordinates with jquery
Here is a simple yet useful trick to position a tooltip (a div element etc) near the mouse click or pointer position using jQuery. In... - A note on DOM elements’ changed scope when using thickbox with jQuery
A similar situation may arise (atleast for me it did) when you try to invoke jQuery’s “thickbox” in conjunction with a custom onclick firing. I...
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
