在 <select> 上是否有 onload 的替代方案？

Question

我正在使用 jinja 模板编译基于模板变量字典的多个 select 块的形式，如下所示：

{% for key, value in some_template_variable_dict.items %}
        <select id="{{ key }}_selector" name="key">
            {% for item in values %}
                <option value="{{ item }}">{{ item }}</option>
            {% endfor %}
        </select>
{% endfor %}

我想在加载文档时在所有 select 块上为 selectize 触发以下包装函数：

function selectizeSingleChoice(selector) {
    $('#'+selector).selectize({
        sortField: 'text',
        maxItems: 1,
        create: false,
        highlight: true,
        openOnFocus: true
    });
}

select 块没有 onload 事件处理程序，我不能将它放在一般的 $(document).ready();部分，因为 select 块的确切列表及其 id-s 取决于用户的选择。还有一个选项，其中一些需要稍微不同版本的 selectize 包装器（例如，不仅允许一个 selected 选项等），所以我不能在每一个上都触发它select 项。

一个可行的解决方案是在 for 循环中插入一个脚本标记，但我不喜欢它太乱。

Answer 1

由于您的数据是动态生成的，因此您可以使用 class 标记每个 select 选项，指定其类型，例如 class="type1" 和 class="type2"，以便稍后您可以单独执行从 JS 端对它们执行操作。或者您可以使用 HTML data-* 属性来区分它们。

在 <select> 上是否有 onload 的替代方案？

Is there an alternative for onload on <select>?

html

javascript

jinja2

selectize.js