Select2使用远程数据在单个选择元素中加载默认值

时间:2014-10-04 17:55:57

标签: javascript php jquery jquery-select2

我使用jquery Select2,select2的效果非常好。但是,当页面加载默认值时,我想要的是从控制器加载。

是的我已经谷歌了,是的,这个问题已被多次发布,我无法理解它...所以这就是为什么我需要帮助。

这是select2 js编码:

/*----------- Select2 DropDown Common Script  -------------------------*/
//For ServerSide Script
function commonSelect2(selector,url,id,text,minInputLength,placeholder){
    selector.select2({
        minimumInputLength:minInputLength,
        placeholder:placeholder,
        ajax: {
            type:"post",
            url: url,
            dataType: 'json',
            quietMillis: 100,
            data: function(term, page) {
                return {
                    term: term, //search term
                    page_limit: 10 // page size
                };
            },
            initSelection : function (element, callback) {
                var data = {id: element.val(), text: element.val()};
                callback(data);
            },
            results: function(data, page) {
                var newData = [];
                $.each(data, function (index,value) {
                    newData.push({
                        id: value[id],  //id part present in data
                        text: value[text]  //string to be displayed
                    });
                });
                return { results: newData };
            }
        }
    });
}

以及我如何从php文件中调用它

{{*The Selector for Selecting the User Group*}}
var selector = $('#selectGroup');
var url = "{{base_url()}}admin/usersManageUsers/loadAllUserGroups/";
var id = "GroupID";
var text = "GroupName";
var minInputLength = 0;
var placeholder = "Select User Group";
commonSelect2(selector,url,id,text,minInputLength,placeholder);
//End of the CommonSelect2 function

我添加了initselection()功能,但我不知道我是否写得正确吗?

最后我在html select2隐藏输入标签中添加了这个。

我试图在网上搜索,但看起来我没有在哪里。

1 个答案:

答案 0 :(得分:0)

我的错误。 我在ajax中定义了initSelection。应该在ajax之外定义它。

现在在ajax

之后定义了initSelection()
ajax: {
    type:"post",
    url: url,
    dataType: 'json',
    quietMillis: 100,
    data: function(term, page) {
        return {
            term: term, //search term
            page_limit: 10 // page size
        };
    },
    results: function(data, page) {
        var newData = [];
        $.each(data, function (index,value) {
            newData.push({
                id: value[id],  //id part present in data
                text: value[text]  //string to be displayed
            });
        });
        return { results: newData };
    }
},
initSelection : function (element, callback) {
    var data = {id: element.val(), text: element.val()};
    callback(data);
}