将数据属性添加到 selectize.js 选项

Question

我正在为我的项目使用 selectize.js。但我有数据属性的问题。我想将数据属性添加到选择选项中。 我有这样的默认选择：

<option data-open-balance="false" selected="selected" value="1">PNP.SI.080416</option>

但是当我将 selectize 添加到这个选择时，它变成：

<div data-value="1" data-selectable="" class="selected">PNP.SI.080416</div>

我看到它的“项目对象”只获取值和文本。那么，如何将其他数据属性添加到它的 item 对象中呢？

Answer 1

我看过文档，他们说如果你想为你的元素添加自定义属性，你应该使用dataAttr选项，默认是data-data。所以在你的情况下，代码看起来像这样：

HTML

<select>
    <option data-data='{"openBalance": true}' selected="selected" value="1">PNP.SI.080416</option>
</select>

JS

这里我们提供了自定义渲染方法来使用我们需要的属性来绘制options：

$('select').selectize({
    render: {
        option: function (data, escape) {
            return "<div data-open-balance='" + data.openBalance + "'>" + data.text + "</div>"
        }
    }
})

UDATE

Kyborek 指出，为了保护您的网站或 Web 应用免受 XSS 的攻击，您应该在渲染回调中使用 escape 方法。如果您想在data.text 中显示html 标签，也可以使用它。更新后的示例将如下所示：

$('select').selectize({
    render: {
        option: function (data, escape) {
            return "<div data-open-balance='" + escape(data.openBalance) + "'>" + escape(data.text) + "</div>"
        }
    }
})