使用Jquery AJAX在部分视图中填充下拉列表

Question

我是使用JSON的jQuery新手，并尝试使用返回的结果填充下拉列表。 我基本上有一个按钮，它将在一个ajax调用中打开部分视图，然后通过另一个ajax调用获取下拉数据。

这是我的按钮-

<button type="button" id="createIssueBtn" class="btn btn-lg btn-info" data-toggle="collapse" data-target="#PopUpDiv">I need to create an issue</button><br/>
<div id="PopUpDiv"></div>

这是页面上的javascript-

<script type="text/javascript">

    $(document).ready(function() {

        $('#createIssueBtn').bind("click", function () {
            $.ajax({

                url: '@Url.Action("OpenPopUp", "Issues")',
                dataType: 'html',
                success: function (html) {
                    $('#PopUpDiv').html(html);
                }
            }
        )
            $.ajax({

                dataType: "json",
                url: '@Url.Action("GetIssueTypes", "Issues")',
                success: function (data) {

                    $.each(data.IssueTypes, function (index, item) {

                        $("#selectIssueType").append(
                            $("<option></option>")
                                .text(item.IssueType)
                                .val(item.IssueID)
                            )
                    })
                }
            })
        })

    })
</script>

这是局部视图-

<div id="AddIssues"><br/>


<div >
<select id="selectIssueType">
    <option value="0">Select Issue Type...</option>
</select>
    </div>
    <br/>
    <div>Enter the details of the issue (be specific):</div>
    <div><input type="text" id="IssueDetails" /></div>
    <br/>
    <p>Location of Issue:</p>
    <div><input type="text" id="IssueLocation" /></div>
    <div>&nbsp;<br/></div>
</div>

我正在尝试填充选择。 我得到了数据，但是绑定却使我失望。

谢谢！

编辑

这是我的IssueTypes对象-

public class IssueTypes
    {
        public int IssueID { get; set; }

        public string IssueType { get; set; }
    }

编辑

这是我在Issues控制器中的GetIssueTypes函数-

 public ActionResult GetIssueTypes()
        {
            List<IssueTypes> issuesList = new List<IssueTypes>();

            issuesList = issueService.GetAllIssueTypes().data.Select(w => new IssueTypes()
            {
                IssueID = w.IssueID,
                IssueType = w.IssueType
           }).ToList();

            return Json(issuesList, JsonRequestBehavior.AllowGet);
        }

Answer 1

我最终使用了Angular JS。 我的选择->

<div ng-controller="IssueTypes">
                <select id="issueTypeSelect" ng-model="issueTypeModel">
                    <option ng-repeat="issue in issueTypes" value="{{issue.IssueID}}">{{issue.IssueType}}</option>
                </select>
            </div>

我的角度代码-

 var app = angular.module('Cartegraph', []);
    app.controller('IssueTypes', function IssueTypesController($scope, $http) {

        var url = '@Url.Action("GetIssueTypes", "Issues")';
        $http.get(url).then(function (response) {

            var _data = angular.fromJson(response);
            $scope.issueTypes = _data.data;
        })
    })