[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Change color in Select Box

Posted on 2012-09-10
Medium Priority
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
  • 3
  • 2

Expert Comment

by:Manuel Marienne-Duchêne
ID: 38382881
It's not possible You change color of all entry
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38382990
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

ID: 38383574
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');
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

LVL 45

Accepted Solution

Chris Stanyon earned 2000 total points
ID: 38383632
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="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></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

ID: 38383641
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

ID: 38383654
your a genius

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

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

872 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