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

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

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

---

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

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

还请注意，您不需要if语句，因为标题与您使用.css设置的颜色相匹配。试试这个：

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

你错过了比赛。在选择器中

用这个,

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

而不是这个

---

$'.select2 selection select2 selection single span.select2-selection\uu rendered'

这是一个示例，可以将其放入每个函数中，也可以根据需要进行修改

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

我已经建立了val，但我相信你可以改变它。

---

根据你另一篇被删除的帖子，我想这就是你想要的：

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

只需监听更改事件并更新CSS即可

---

这是您另一篇帖子中更新的小提琴：

请将其放入代码笔/小提琴中：您正在尝试使用所选选项更改span的颜色？@GabrielRodrigues是的，我正在尝试根据所选内容更改每个span。到目前为止，颜色将所有三个选项都更改为绿色。@ann0nC0d3r我可以将整个页面放入JSFIDLE，这只是很多代码。下面是完整的代码：我们正在集中的行位于js第16364行及以上的小提琴底部。这真的很接近，我想，它只是没有改变颜色来匹配它的选择，它只是将整个选择更改为绿色，而不仅仅是绿色选择。是的，对不起，我已经在网页中修复了它，忘记了编辑，所以，它现在已经修复了。这很完美，它完美地处理了它。注意，如果我没有失去6个代表，我会+1你。谢谢你的回答，这让我下班后很高兴。谢谢，不客气。社会有时会变化无常。老实说，我喜欢更多的信息而不是更少的信息，我看不出你贴的小提琴有什么问题。哦，好吧。很高兴我能找到一个适合你的解决方案。

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

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