javascript - 如何在 select.options.add(new Option()) 之后添加 2 个属性

Question

我的选择菜单显示颜色名称，但使用 jQueryUI (custom.iconselectmenu)，我喜欢添加具有相应颜色的头像 block 。我不知道如何添加这两个属性:

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

这是一个 fiddle :https://jsfiddle.net/ad1no8ou/

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