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

Question

我正在为我的项目使用selectize.js.但是我遇到了数据属性问题.我想将数据属性添加到选择选项.我有默认选择如下:

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

但是当我为这个选择添加选择时,它变为:

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

我看到它的"item object"只获得了值和文本.那么,如何将其他数据属性添加到其项目对象中？

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