javascript不会将数据绑定到HTMLSelect元素

javascript does not bind the data to HTML Select element

本文关键字：HTMLSelect 元素 数据绑定 javascript      更新时间：2023-09-26

我有一个html5或Dropdown的select元素。我正在使用c#从数据库中提取数据，它正在正确地获取数据。当我尝试使用java脚本将从db获取的数据绑定到select元素时，它不会这么做。我可以获得java脚本变量中的所有UserNames，但当我尝试将其绑定到下拉/选择元素时，它不会出现

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

独立的成功功能

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

您需要将其作为<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 
    }));
});

您需要为数组中的每个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));
相关文章：