如何用AJAX填充选择列表？

Question

我想填充选择与AJAX的选项。我究竟做错了什么？

这里是在我看来代码：

$(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

val不用于添加html。

相反的：

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

尝试：

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

Answer 2

当您使用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（）如果只控制

这样

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

，并从你的HTML删除选项

像这样

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