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

Question

我正在使用 jinja 模板来编译基于模板变量字典的多个选择 block 的形式，如下所示:

{% 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 %}

我想在加载文档时触发以下包装函数以在所有选择 block 上进行选择:

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

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

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

Answer 1

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