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

Question

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

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

但是当我将 selectize 添加到这个 select 时，它变成了:

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

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

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>"
        }
    }
})

更新

作为Kyborek请注意，为了保护您的网站或网络应用免受 XSS 的侵害，你应该在渲染回调中使用 escape 方法。如果您想在 data.text 中显示 html 标记，也可以使用它。更新后的示例将如下所示:

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