SharePoint Custom List Field Color Set Background Color using jQuery

Posted: November 7, 2014 in SharePoint2010, SharePoint2013


In this article we explore SharePoint custom list field DropDown with their different color option for example see below scenarios:

It has a field called “Status’, this filed has a drop down list Contains Red, Green and Yellow.

If you select Red then background should become Red

If you select Green then background should become Green

If you select Yellow then background should become Yellow

Let’s Proceed

Edit the All items List page in the browser and add a Content Editor Web part, modify the web part and show the Source Editor to add the following code:

<script language=”javascript” src=”/JS/jquery-1.9.0.min.js” type=”text/javascript”></script>

<script language=”javascript” type=”text/javascript”>

$(document).ready(function () {

var colr = “”;

$(“select[title$=’Color’]”).change(function () {

colr = $(“select[Title=’ Status ‘]”).val();

$(“select[Title=’Status’]”).css(“background-color”, colr);



After adding JQuery click apply and ok. Save page.

See the final result:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s