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

【问题标题】：JQuery Change Background Color of Dropdown List Element Based on TitleJQuery根据标题更改下拉列表元素的背景颜色
【发布时间】：2016-01-20 04:49:53
【问题描述】：

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

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

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

【问题讨论】：

请把它放在codepen/fiddle中：jsfiddle.net
U 正在尝试使用所选选项更改跨度编码的颜色？
@GabrielRodrigues 是的，我正在尝试根据选择更改每个单独的跨度。截至目前，颜色将所有三个选项都变为绿色。
@ann0nC0d3r 我可以把整个页面扔到 jsfiddle 中，这只是很多代码。
这里是完整的代码：我们正在关注的行在这个小提琴的底部，在 js 行 16364 及以上。 jsfiddle.net/8hknqjax/5

标签： javascript jquery html css

【解决方案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/

【讨论】：

这很完美，它可以完美地处理它。顺便说一句，如果我没有失去 6 个代表，我会 +1 你。感谢您的回答，使我下班后成为了我。谢谢
大声笑不客气。 SO 社区有时会变幻无常。老实说，我更喜欢更多的信息而不是更少的信息，我看不出你发布的小提琴有什么问题。那好吧。很高兴我能找到适合您的解决方案。

【解决方案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);
});

Working example

【讨论】：

这真的很接近，我认为，它只是没有改变颜色以匹配它的选择，它只是将整个选择更改为绿色，而不仅仅是“绿色”选择。

【解决方案3】：

你错过了选择器中的. 所以，

使用这个，

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

而不是这个

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

【讨论】：

是的，抱歉，我已经在网页中修复了，忘记在 SO 中编辑，现在已修复

【解决方案4】：

这是一个示例，可以将其放在每个函数中或将其修改为您想做的任何事情。

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

我已经在 val() 上构建了它，但我相信你可以更改它。 JSFIDDLE HERE

【讨论】：