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

Question

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

我在 MVC Controller 中的 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));

单独的成功函数

 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 
    }));
});