JQuery 根据标题更改下拉列表元素的背景颜色

Question

在此代码中，它起源于一个带有选择标签的空白表：

<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 函数生成的，这些函数将所选内容格式化为嵌套范围列表：

<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函数创建下拉列表并设置格式后运行。

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

我已经能够简化代码并将所有元素的颜色更改为单一颜色。但是，我正在尝试根据每个选择元素的标题更改该元素的颜色，而不是更改其他元素的背景颜色。

Answer 1

根据您被删除的其他帖子，我认为这就是您所追求的：

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

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

这是您另一篇文章中的最新小提琴：https://jsfiddle.net/jmarikle/ea7q41k7/

Answer 2

鉴于您声明 Select2 正在生成的 HTML 结构，您的选择器不正确。select2-selection 和 select2-selection--single 都应用于同一个元素，因此它们之间的空格需要替换为类选择器; . .

另请注意，您不需要 if 语句，因为title与您设置的颜色相匹配 .css() .试试这个：

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

工作示例

Answer 3

您缺少选择器中的.，因此，

用这个，

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

而不是这个

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

Answer 4

这是一个示例，将其

放在每个函数中或将其修改为您想要执行的任何操作。

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

我已经在 val（） 上构建了它，但我相信你可以改变它。在这里 JSFIDDLE