如何用AJAX填充选择列表？

Question

我想用AJAX中的select来填充选项。我做错了什么？

以下是我视图中的代码：

 $(function() {
    $.getJSON("Animes/GetCategories", null, function(data) {
        var options = '';
        for (var x = 0; x < data.length; x++) {
            options += '<option value="' + data[x]['CategoryID'] + '">' + data[x]['CategoryNom'] + '</option>';
        }
        console.log(options);
        $('#lstCat').html(options);

    });
});

我的控制器中的代码：

public JsonResult GetCategories() {
    var affCat = from cats in db.Categories
    select new {
        CategoryID = cats.CategoryID,
        CategoryNom = cats.CategoryNom
    };

    return Json(affCat, JsonRequestBehavior.AllowGet);
}

我视图中选择的代码：

<select id="lstCat">
    //Don't know what to place in the select
    <option>?</option>
</select><br />

Answer 1

当您使用Angularjs时，请尝试使用完全而不是与jquery混合

试试这个

<强>的js

var app = angular.module("app", []);
app.controller("myCtrl", ["$scope", function($scope) {
    $scope.categoryList = [];
    $.getJSON("Animes/GetCategories", null, function(data) {
        $scope.categoryList = data;
    });
}]);

<强> HTML

<div ng-app="app" ng-controller="myCtrl">
   <select id="lstCat" ng-options="category.CategoryID as category.CategoryNom for category in categoryList">
   </select>
</div>

顺便说一下html jquery有.html()来附加html。 .val（）if仅用于控件

像这样

$('#lstCat').html(options);

并从您的html删除选项

喜欢这个

<select id="lstCat">
</select>

Answer 2

val不用于添加html。

而不是：

$('#lstCat').val(options); 

尝试：

$('#lstCat').html(options);