javascript 不会将数据绑定到 HTML Select 元素

Question

我有这个 html5 或 Dropdown 的选择元素。我正在使用 c# 从正确获取的数据库中获取数据。当我尝试使用 java 脚本将从 db 获取的数据绑定到选择元素时，它只是不这样做。我可以在 java 脚本变量中获取所有用户名，但是当我尝试将其绑定到下拉/选择元素时，它只是没有出现

我在 MVC 控制器中的 C# 方法是

 public JsonResult GetUsersList()
    {
       // var userList= new List<>
        var userList = _db.UserInfromations.ToList();
        return Json(userList, JsonRequestBehavior.AllowGet);
    }

我的选择元素

<select id="userDropDown" required name="userDropDown"></select>

和我的 java 脚本，我将添加我到目前为止所做的所有尝试.. 为成功创建了单独的函数，并且除了注意到之外的所有工作

 jQuery(document).ready(function () {
   // debugger;

    $.ajax({
        type: "GET",
        url: "/User/GetUsersList",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
    })
        .success(function (data) {
            var userName = data.UserName;
            $("#userDropDown").val(userName);
            return false;
        })
        .error(function () {
            window.ajaxErrorMessage();
        });
}(jQuery));

单独的 Success 函数

 function displayUser(response) {
    var getData = response;
    if (getData.length > 0) {
        var user = "";
       // user = "";
        for (var i = 0; i < getData.length; i++) {
            user += " " + getData[i].UserName ;
        }
       // $("#userDropDown").val(user);
        $("#userDropDown").text(user);
        //$("#userDropDown").html(user);
    }
}

Answer 1

您需要将其作为<option> 添加到选择框中。您可能还需要解析 json。

用下面的代码替换这个...$("#userDropDown").val(userName);：

$("#userDropDown").append($('<option/>', { 
        value: userName,
        text : userName 
}));

对于多个添加，使用$.each()。您还需要JSON.parse(data) 才能获得正确的格式。

$.each(userName, function (index, value) {
    $('#userDropDown').append($('<option/>', { 
        value: value,
        text : value 
    }));
});    

Answer 2

您需要为数组中的每个 json 对象创建一个选项标签，然后选择每个对象的属性 试试：

 jQuery(document).ready(function () {
       // debugger;

        $.ajax({
            type: "GET",
            url: "/User/GetUsersList",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
        })
            .success(function (data) {
               $.each(data,function(i,v){
                  $("#userDropDown").append($('<option/>', { 
            value: v.Id,
            text : v.UserName 
        })); 
    })

            })
            .error(function () {
                window.ajaxErrorMessage();
            });
    }(jQuery));