JQuery根据标题更改下拉列表元素的背景颜色 [英] JQuery Change Background Color of Dropdown List Element Based on Title

问题描述

在此代码中，它只是一个带有select标记的空白表：

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>

这是使用jQuery函数生成的，这些函数将选择格式化为一个嵌套的列表：

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>

我试图通过使用jQuery的单个背景颜色基于元素。这里是我当前的颜色变化功能。在 select2 函数创建并格式化下拉列表后运行。

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.

推荐答案

根据您删除的其他讯息，我认为这是您的追踪：

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

只需监听更改事件并更新CSS。

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

这是您的其他帖子的更新小提琴： https://jsfiddle.net/jmarikle/ea7q41k7 /

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

这篇关于JQuery根据标题更改下拉列表元素的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！