Question

我使用Select2来填充英国城镇的下拉列表。由于英国城镇数据库庞大，我认为AJAX调用将是引入数据的最佳方式。

我已经构建了一个post函数和一些PHP（在Codeigniter中）来捕获查询并解析它。

我可以看到数据正在发布和响应，但是我的Select2没有填充数据。

我的jQuery就是：

 $("#areas").select2(
    {
        tags: [],
        ajax: {
            url: '/profile/get-towns',
            dataType: 'json',
            type: "POST",
            quietMillis: 100,
            data: function (term) {
                return {
                    query: term
                };
            },
            results: function (data) {
                return {
                    results: data.town_id
                }
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 4,
        placeholder         : "Start typing your Town / City",
        maximumSelectionSize: 2
    }
);

我的回复jSON（示例）如下：

[{"town_id":"16994","town":"Hartle"},{"town_id":"16995","town":"Hartlebury"},{"town_id":"16996","town"
:"Hartlebury"},{"town_id":"16997","town":"Hartlebury Common"},{"town_id":"16998","town":"Hartlepool"
},{"town_id":"16999","town":"Hartley"},{"town_id":"17000","town":"Hartley"},{"town_id":"17001","town"
:"Hartley"},{"town_id":"17002","town":"Hartley"},{"town_id":"17003","town":"Hartley Green"},{"town_id"
:"17004","town":"Hartley Green"},{"town_id":"17005","town":"Hartley Mauditt"},{"town_id":"17006","town"
:"Hartley Wespall"},{"town_id":"17007","town":"Hartley Wintney"},{"town_id":"27051","town":"New Hartley"
},{"town_id":"35891","town":"Stowe-by-Chartley"}]

我哪里错了？理想情况下，我希望选择下拉菜单选择值= town_id，并选择选项作为城镇名称。

谢谢。

Answer 1

在您的select2配置中：

results: function (data) {
    var res = [];
    for(var i  = 0 ; i < data.length; i++) {
        res.push({id:data[i].town_id, text:data[i].town});
    }
    return {
        results: res
    }
},

因为select2希望结果为具有键id和text的对象数组。

否则您可能已经返回格式正确的对象

[
   {"id":"16994","text":"Hartle"},
   {"id":"16995","text":"Hartlebury"},
   {"id":"16996","text":"Hartlebury"},
   {"id":"16997","text":"Hartlebury Common"}
]

然后

results: function (data) {
    return {
        results: data
    }
},

Answer 2

在您的ajax电话上，尝试添加成功。像这样：

<div class="container w-xxxl w-auto-xs " ng-controller="SurveyQuizController">
    <div class="panel box-shadow fade-in-right " style="opacity: 0.9" ng-repeat="question in questions" ng-show="current_question == $index">
        <div class="panel-heading b-b">
            <h1 class="h2 margin-none">{{question.question.question}}?</h1>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <multiple ng-show="question.question.question_type_id == 1"></multiple>
            </div>
        </div>
        <div class="panel-footer text-center">
            <strong class="small">{{$index+1}} out of {{questions.length}} questions</strong>
            <div class="clear">
                <a class="btn btn-default pull-left {{$index == 0 ? 'disabled' : ''}}" ng-click="previousQuestion()">Prev</a>
                <a  class="btn btn-primary pull-right" ng-click="nextQuestion()">Next</a>
            </div>
        </div>
    </div>

</div>

Select2 - Ajax数据 - 根据查询

2 个答案: