Change color in Select Box

Posted on 2012-09-10
Last Modified: 2012-09-10
I have a select box


This select box is populated from an mssql database.  Say that the querey is select LastName from Customers, it would return


Which works fine.  Is there a way in javascript to change the color of an entry that matches a condition such as

if Lastname = Marvel then (Change text color to Red) else leave it black
Question by:rmardis
    LVL 6

    Expert Comment

    It's not possible You change color of all entry
    LVL 42

    Expert Comment

    by:Chris Stanyon
    You can set the colour for an individual item using CSS - either inline, of by adding a class.

    <select id="mySelect">
       <option value="Allen">Allen</option>
       <option class="selected" value="Johnson">Johnson</option>
       <option value="Marvel">Marvel</option>
       <option value="Stevens">Stevens</option>

    #mySelect .selected { color: red; }

    You could either add the class server-side using your scripting language, or client side using javascript. Here's a jquery line to do it:

    $("select option:contains('Marvel')").addClass('selected');

    Author Comment

    This is promising!

    I think i would have to use the jquery option but i have no idea how to implement it.  

    The code for my select is below

    <form name="TestForm" id="bobbyform" method="POST" action="drop.asp">
    <Select Name="LastName" Id="LastName" size="1">
    <option value="">Select a Name</option>
    <%While Not CmdNames.EOF%>
    <option value="<%= CmdNames("LastName") %>"><%= CmdNames("LastName") %></option>
    Set CmdNames = Nothing

    Open in new window

    how would i implement your suggestion

    $("select option:contains('Marvel')").addClass('selected');
    LVL 42

    Accepted Solution

    You haven't said how you want to specify the condition arguments, i.e. where does the 'Marvel' string come from? If you're hard coding it, then you just use it as I've already shown.

    Here's an html doc which hilites an option when the page loads, based on some hard-coded value.

    <!DOCTYPE html>
    <html lang="en">
    		<meta charset="utf-8" />
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    		<title>Chris Stanyon</title>
    		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
    		<script src=""></script>
    		<script type="text/javascript">
    		$(document).ready(function() {
    				$("#LastName option:contains('Marvel')").addClass('selected');
    		<style type="text/css">
    			.selected { color:red; }
    	<form action="" method="post">
    		<select id="LastName">
    		   <option value="Allen">Allen</option>
    		   <option value="Johnson">Johnson</option>
    		   <option value="Marvel">Marvel</option>
    		   <option value="Stevens">Stevens</option>

    Open in new window


    Author Comment

    The select box is populated when the page loads.  The box displays "Select a Name"

    after clicking the down arrow it show the list returned by the sql query

    i will hardcode a name that i'm hoping i can have the color changed on, in this case Marvel would be red but all others black

    Author Closing Comment

    your a genius

    This is exactly what i was trying to do.  Thank you so much!!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    758 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now