Change the color of selected index in ListBox with Javascript

Question

Hy guys,

I am currenty working with Microsoft Dynamics CRM 2011, and I am trying to customize Listbox control. So I have Listbox with 8 options to select and each option is different color. The code is :

new_verkaufschance - Name of ListBox control

function VerkaufschanceChangeColorsFunction() {

var myListVerkaufschance = crmForm.all.new_verkaufschance;

var option1 = myListVerkaufschance.options[1];
var option2 = myListVerkaufschance.options[2];
var option3 = myListVerkaufschance.options[3];
var option4 = myListVerkaufschance.options[4];
var option5 = myListVerkaufschance.options[5];
var option6 = myListVerkaufschance.options[6];
var option7 = myListVerkaufschance.options[7];
var option8 = myListVerkaufschance.options[8];

option1.style.backgroundColor = "#FA676F";
option2.style.backgroundColor = "#F98B70";
option3.style.backgroundColor = "#FDBD7D";
option4.style.backgroundColor = "#DFE384";
option5.style.backgroundColor = "#A3D07F";
option6.style.backgroundColor = "#7FC57F";
option7.style.backgroundColor = "#67BC7B";
option8.style.backgroundColor = "#F8696B";
}

Now the problem is when I select one option from ListBox my selected item doesn't get the color it has, but the crm switch it back to default white. I want that selected item keeps his color. I tried this:

var myListVerkaufschanceLenght = myListVerkaufschance.length;

for (var i = 0; i < myListVerkaufschanceLenght; i++) {
    if (myListVerkaufschanceLenght[i].value == myListVerkaufschanceLenght.value) {

    }
}

So I go through all items, and if item is selected item, then change color? Someone has any better idea?

I found also other topics with similar problem, but they needed to change to one color, and I need multiple color option.

Thx for your help :)

Answer 1

Here's how I achieved this, has a dependency on jQuery. Register the function on the form load event.

function ColourPriority() {

    $("#new_priority").children().each(function () {
        var a = this;

        // P1
        $(a).val() == 100000000 && $(a).css({
            background: "#F6CECE"
        });
        // P2
        $(a).val() == 100000001 && $(a).css({
            background: "#F8E0E0"
        });
        // P3
        $(a).val() == 100000002 && $(a).css({
            background: "#F3E2A9"
        });
        // P4
        $(a).val() == 100000003 && $(a).css({
            background: "#F7F8E0"
        });
        // P5
        $(a).val() == 100000004 && $(a).css({
            background: "#D0F5A9"
        });
        // P6
        $(a).val() == 100000005 && $(a).css({
            background: "#E0F2F7"
        });
    });

}

..and this is how it looks. The background color persists once the field is unselected.