Question

在这段代码中，它只是一个带有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>

这是使用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);
});

Working example

Answer 3

您错过了选择器中的.，

使用此，

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

而不是

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

Answer 4

这是一个将它放在每个函数中的例子，或者将它修改为你想做的任何事情。

    INSERT INTO "dbo"."sql_server_table"@dblink_name("column1","column2"...."column5")
VALUES
(
    select column1,column2....column5 from oracle_table
    minus
   select "column1","column2"...."column5" from "dbo"."sql_server_table"@dblink_name
)

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

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

4 个答案: