SharePoint Custom List Field Colour set background colour using jQuery

InfoPath alternatives for form designing SharePoint
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

Similar SharePoint 2013 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