Question

我的选择菜单显示颜色名称但是使用jQueryUI（custom.iconselectmenu）我想添加一个具有相应颜色的头像块。我无法弄清楚如何添加这两个属性：

data-class="avatar" data-style="background-image: none; background-color: (the rgb value)

在我的代码中：

var data = [
    { text: 'Select a Color', value: '0' },
    { text: 'Antibes Green', value: 'rgb(95,173,72)' },
    ...
    { text: 'Versailles', value: 'rgb(206,204,130)' }
];

for(var j=0; j < data.length; j++) {
    var d = data[j];
    select.options.add(new Option(d.text, d.value))
}

Answer 1

或者，您可以在选项上使用the setAttribute method，如下所示：

var option = new Option(d.text, d.value);
option.setAttribute('data-class', 'avatar');
option.setAttribute('data-style', 'background-image: none; background-color: ' + d.value);
select.options.add(option);

这是一个小提琴：https://jsfiddle.net/ad1no8ou/

我的偏好是避免使用字符串连接创建HTML，因为当您不可避免地忘记在连接的值中转义特殊字符时，存在错误的风险。

Answer 2

尝试替换此行

select.options.add(new Option(d.text, d.value))

通过

select.innerHTML += "<option value='" + d.text + "' data-class='avatar' data-style='background-image: none; background-color: (the rgb value)'>" + d.value +"</option>";

如何在select.options.add（new Option（））之后添加2个属性

2 个答案: