JQuery Change Background Color of Dropdown List Element Based on Title

Question

In this code, it originated with just a blank table with a select tag:

<table class="table">
    <tr>
        <td>
            <select id="e2">
                <option value="green">Green</option>
                <option value="yellow">Yellow</option>
                <option value="red">Red</option>
            </select>
        </td>
    </tr>
</table>

This is generated with jQuery functions that format the selection as a list of nested spans:

<table class="table">
    <tr> 
        <td>
            <b class="tablesaw-cell-label">Status</b>
            <span class="tablesaw-cell-content">
                <select tabindex="-1" class="select2-hidden-accessible" id="e2" aria-hidden="true">
                    <option value="green">Green</option>
                    <option value="yellow">Yellow</option>
                    <option value="red">Red</option>
                </select>
                <span class="select2 select2-container select2-container--default select2-container--below" style="width: 64px;" dir="ltr">
                    <span class="selection">
                        <span tabindex="0" class="select2-selection select2-selection--single" role="combobox" aria-expanded="false" aria-haspopup="true" aria-labelledby="select2-e2-container">
                            <span title="Green" class="select2-selection__rendered" id="select2-e2-container">Green</span>
                            <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
                        </span>
                    </span>
                    <span class="dropdown-wrapper" aria-hidden="true"></span>
                </span>
            </span>
        </td>
    </tr>
</table>

I am trying to change the color by using jQuery of the individual background colors based on the title of the element after the page is loaded. Here is my current color change function. This runs after the dropdown list is created and formatted by the select2 function.

$(document).ready(function () {
    $('#e1').select2();
    $('#e2').select2();

    $('.select2-selection.select2-selection--single span.select2-selection__rendered').each(function () {
        var title = $(this).attr('title');
        console.log(title);
        if (title === 'Green') {
            $(this).parent().css('background-color', 'green');
        }
        if (title === 'Yellow') {
            $(this).parent().css('background-color', 'yellow');
        }
        if (title === 'Red') {
            $(this).parent().css('background-color', 'red');
        }
    });
});

I have been able to simplify the code and change the color of all elements as a single color. However, I'm trying to change the color of each selection element based on the title of that element and not change the other elements's background color.

U are trying to change the color of span acodding with the selected option ? — Gabriel Rodrigues
– Gabriel Rodrigues, Commented Jan 19, 2016 at 17:09
@GabrielRodrigues Yes, I'm trying to change each individual span according to the selection. As of right now, the color changes all three selections to green. — marcwebdude
– marcwebdude, Commented Jan 19, 2016 at 18:26
@ann0nC0d3r I can toss this entire page into jsfiddle, it's just a lot of code. — marcwebdude
– marcwebdude, Commented Jan 19, 2016 at 18:36
here's the full code: the lines which we are concentrating are at the bottom of this fiddle in js lines 16364 and up. jsfiddle.net/8hknqjax/5 — marcwebdude
– marcwebdude, Commented Jan 19, 2016 at 18:46

Joseph Marikle · Accepted Answer · 2016-01-19 20:43:08Z

2

Based on your other post that got deleted, I think this is what you're after:

$(document).ready(function () {
    $('#e1').select2();
    $('#e2').select2().on('change', function(){
        $(this).next().find('.select2-selection').css({
            backgroundColor: this.value
        });
    }).trigger('change');
});

Just listen for the change event and update the CSS then.

Here's an updated fiddle from your other post: https://jsfiddle.net/jmarikle/ea7q41k7/

answered Jan 19, 2016 at 20:43

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

marcwebdude Over a year ago

That's perfect, it takes care of it perfectly. Advertently, had I not lost 6 rep I'd +1 you. Thank you for an answer that made what I was after work. Thanks

Joseph Marikle Over a year ago

lol You're welcome. The SO community can be fickle at times. Honestly, I prefer more info to less and I don't see anything wrong with the fiddle you posted. Oh well. Glad I could find a solution that works for you.

Rory McCrossan · Accepted Answer · 2016-01-19 16:53:41Z

2

Given the HTML structure which you state that Select2 is generating, your selector is incorrect. The select2-selection and select2-selection--single are both applied to the same element, so the space between them needs to be replaced with a class selector; ..

Also note that you don't need the if statement as the title matches the colour you're setting with .css(). Try this:

$('.select2-selection.select2-selection--single span.select2-selection__rendered').each(function () {
    var title = $(this).attr('title');
    $(this).parent().css('background-color', title);
});

Working example

answered Jan 19, 2016 at 16:53

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

1 Comment

marcwebdude Over a year ago

This is really close, I think, it's just not changing the color to match it's selection, it's only changing the entire selection to green instead of just the "Green" selection.

Sathish · Accepted Answer · 2016-01-19 16:53:49Z

2

You missing the . in the selector so,

use this,

$('.select2-selection.select2-selection--single span.select2-selection__rendered')

instead of this

$('.select2-selection select2-selection--single span.select2-selection__rendered')

answered Jan 19, 2016 at 16:53

Sathish

2,4601 gold badge16 silver badges27 bronze badges

1 Comment

marcwebdude Over a year ago

yeah sorry, I had already fixed that in the webpage and forgot to edit in SO, it's fixed now

Daniel PurPur · Accepted Answer · 2016-01-19 17:13:28Z

0

this is an example put it in each function or modify it to whatever you wanna do.

$('#e2').on('click', function(){
    var title = $(this).attr('title');
    $(this).css('background-color', title);
});

I have built it on val() but I am sure you can change it. JSFIDDLE HERE

edited Jan 19, 2016 at 17:13

answered Jan 19, 2016 at 16:59

Daniel PurPur

5293 silver badges13 bronze badges

Collectives™ on Stack Overflow

JQuery Change Background Color of Dropdown List Element Based on Title

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related