如何向各个下拉选项添加颜色数组

Question

我正在为InDesign开发HTML扩展，在这里，我已将所有色板名称提取到一个JSON文件中，该文件已解析为HTML下拉列表。我想在每种颜色旁边添加一个色板。我想做到这一点的唯一方法是添加一个CSS类，该类添加左边框颜色。有没有办法提取颜色名称数组并将其附加为左边框颜色？

html代码：

<select id="swatchNumber" class="swatchColor" size="10"></select>

css代码：

.swatchColor option {
  margin: 3px;
  background: #dddddd;
  color: #333333;
  border-left: 15px solid white;
}

js代码：

changeElement("swatchNumber");

var callBack = function (result) {
    try {
        var swatchesConv = JSON.parse(result);

        var select = document.createElement('SELECT');
        select.name="swatchNumber";
        select.id="swatchNumber";
        document.body.appendChild(select);

        Object.keys(swatchesConv).forEach(function(result){
        document.getElementById('swatchNumber').innerHTML +='<option value="'+result+'">'+swatchesConv[result].name+'</option>'
        })


    } catch (e) { alert(e.message); }
}
csInterface.evalScript('swatchIndex()', callBack);

使用时

 var selectOption = document.getElementById("swatchNumber");    
    selectOption.style.borderColor = "orange";

这使我在整个下拉菜单中都有一个边界。而不是其中的单个元素。

Answer 1

另一个选项，您可以将样式直接插入选项：D中