javascript - JQuery Change Background Color of Dropdown List Element Based on Title - Stack Overflow

admin管理员组

文章数量:1389932

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="bobox" 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.

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="bobox" 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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 19, 2016 at 18:29 marcwebdude asked Jan 19, 2016 at 16:46 marcwebdudemarcwebdude 7322 silver badges1414 bronze badges 5

• 1 Put it in a codepen/fiddle please: jsfiddle – ann0nC0d3r Commented Jan 19, 2016 at 16:50
• U are trying to change the color of span acodding with the selected option ? – 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 Commented Jan 19, 2016 at 18:26
• @ann0nC0d3r I can toss this entire page into jsfiddle, it's just a lot of code. – marcwebdude Commented Jan 19, 2016 at 18:36
• 1 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/8hknqjax/5 – marcwebdude Commented Jan 19, 2016 at 18:46

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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/jmarikle/ea7q41k7/

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

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

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

本文标签： javascriptJQuery Change Background Color of Dropdown List Element Based on TitleStack Overflow