Javascript 添加数据属性以选择.js选项

我正在为我的项目使用selectize.js。但是我在数据属性方面有问题。我想向选择选项添加数据属性。 我有如下默认选择：

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

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

PNP.SI.080416

但当我将selectize添加到此select时，它会变成：

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

PNP.SI.080416

---

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

我看过文档，他们说如果你想将自定义属性添加到元素中，你应该使用

dataAttr

选项，默认情况下它是

数据

。因此，在您的情况下，代码将如下所示：

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

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

HTML

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

UDATE

如前所述，为了保护您的网站或web应用的安全，您应该在渲染回调中使用

escape

方法。如果您想在

data.text

中显示

html

标记，也可以使用它。更新后的示例如下所示：

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

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

$（'select'）。选择({
呈现：{
选项：函数（数据、转义）{
返回“+转义（data.text）+”
}
}
})

如果有人想使用php，可以使用此

。在数据标记中使用单引号非常重要，因为JSON使用双引号“对于结构。由于JS解决方案受XSS约束，因此被否决。如果data.text包含html标记或简单的

，它将打破下拉列表。为此，提供了转义函数，以便您可以在返回数据之前转义数据。结果返回应该是：

return”“+escape（data.text）+

@Kyborek尽管在我看来，它与问题无关，但我已经用您的注释更新了我的答案，谢谢。