SharePoint Custom List Field Colour set background colour using jQuery

Introduction:
In this article we explore SharePoint custom list field dropdown their different colour 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);
  });
 });</script>
After adding jQuery click apply and ok. Save page.
See the final result ……
 SharePoint Custom List Field Colour set background colour using jQuery
SharePoint Custom List Field Colour set background colour using jQuery

You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply