Question

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

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

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

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

2 个答案: