Select2使用文件中的Ajax加载数据

时间:2013-08-28 14:21:29

标签: ajax jquery jquery-select2

我有一个名为listofValues.php的脚本,它会查询数据库并返回JSON格式值。

我需要将这些值传递给select2 data成员。我需要它加载一次。

我不需要将select2输入(字词)中的值传递到我的listofValues.php,如this example

中所述
$('#select2div').select2({
        //data:[],
    ajax: {
        dataType: "json",
        url: "listofvalues.php",    
        success: function (data) {          
        }
    }

你能帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:28)

简单示例

了解从listofvalues.php返回的对象的格式会很有用,但我们只是假设,为简单起见,它看起来像这样:

[ {"id": 1, "text": "option1"},
  {"id": 2, "text": "option2"},
  {"id": 3, "text": "option3"} ]

这是最简单的格式,因为默认情况下,select2可以处理属性名为idtext的对象,并将它们渲染到下拉列表中。因此,select2初始化可能如下所示:

$('#select2div').select2({
    ajax: {
        dataType: "json",
        url: "listofvalues.php",
        results: function (data) {
            return {results: data};
        }
    }
});

稍微狡猾的例子

现在让我们假设来自listofvalues.php的数据不遵循方便的命名约定:

[ {"id": 1, "firstName": "John", "lastName": "Lennon"},
  {"id": 2, "firstName": "Paul", "lastName": "McCartney"},
  {"id": 3, "firstName": "George", "lastName": "Harrison"},
  {"id": 4, "firstName": "Ringo", "lastName": "Starr"} ]

我们必须设置一个处理输出的函数:

function formatValues(data) {
    return data.firstName + ' ' + data.lastName;
}

我们的select2初始化:

$('#select2div').select2({
    ajax: {
        dataType: "json",
        url: "listofvalues.php",
        results: function (data) {
            return {results: data};
        }
    },
    formatResult: formatValues
});

让我知道你是怎么过的。