SharePoint Custom List Field Color Set Background Color using jQuery

In this article we explore SharePoint custom list field DropDown with their different color option.

Introduction

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);

        });

    });</script> 

After adding JQuery click apply and ok. Save page.

See the final result: