为selectize.js选项添加数据属性

Add data-attribute to selectize.js options

本文关键字：添加 数据属性 选项 js selectize      更新时间：2024-03-16

我的项目使用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>

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

我看过文档，他们说如果你想向元素添加自定义属性，你应该使用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>"
        }
    }
})
相关文章：