如何用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>