Question

我目前将此输入元素输出到我的浏览器：

<select name="data[Repository][owner_id]" class="owners" style="width: 100%" id="RepositoryOwnerId">
    <option value="1" selected="selected">value here</option>
</select>

当我添加jQuery代码以启用Select2时，它将删除该选项的内容，我在框中看不到任何内容。当我在Firefox中使用Inspect Element时，该选项的值为空。

$('#RepositoryOwnerId').selectize({
    valueField: 'id',
    labelField: 'name',
    searchField: 'name',
    minimumInputLength: 2,
    options: [],
    create: false,
    render: {
        option: function(item, escape) {
            return '<div>'+ escape(item.name) + '</div>';
        }
    },
    load: function(query, callback) {

        if (!query.length) return callback();
        $.ajax({
            url: '/file/to/remote/<?php echo $id?>',
            type: 'GET',
            delay: 250,
            dataType: 'json',
            data: {
                q: query
            },
            error: function(xhr, status, error) {
                //alert(error);
                callback();
            },
            success: function(res) {
                callback(res.users);
            }
        });
    }
});

查看以下页面的代码： https://select2.github.io/examples.html

我决定将变量初始化为：

echo "<script>var owners = [{ 'id': '12345', 'name': 'Name Here'}]</script>";

然后，在加载时，如果查询长度为0，则返回回调中的所有者：

if (!query.length) return callback(owners);

这也不起作用。如果我在那里添加一个警报，它就不会在页面加载时被触发。

Answer 1

删除options: []。您无法传入空数组，因此只需删除引用。

应用Select2时，选择选项变为空白

1 个答案: