来自 MVC JsonResult 列表的 jQuery 下拉列表 - JavaScript

在开发Web应用程序时，下拉列表框是一个常用的用户界面元素。在很多情况下，开发人员需要从服务器端获取数据并将其填充到下拉列表框中。本文将介绍如何使用jQuery和MVC JsonResult来实现这个功能。

MVC JsonResult

在MVC中，JsonResult是一个用于返回JSON格式数据的ActionResult类型。通常，开发人员可以从控制器中返回JsonResult，并使用JavaScript来处理这些数据。在这个例子中，我们将使用JsonResult和jQuery来填充下拉列表框。

使用jQuery填充下拉列表框

以下代码演示了如何使用jQuery来填充下拉列表框。

$.ajax({
    type: "GET",
    url: "/Controller/Action",
    success: function (data) {
        var select = $("#select-id");
        select.empty();
        $.each(data, function (index, item) {
            select.append($("<option>").val(item.value).text(item.text));
        });
    }
});

在代码中，我们首先使用jQuery的ajax()方法从服务器端获取数据。在成功的回调函数中，我们使用each()方法遍历数据并将其添加到下拉列表框中。

示例代码

下面是一个完整的示例代码，用于从MVC的JsonResult返回列表数据并填充到jQuery的下拉列表框中。

@model IEnumerable<MvcApplication.Models.SelectItem>

<select id="select-id"></select>

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/Controller/Action",
            success: function (data) {
                var select = $("#select-id");
                select.empty();
                $.each(data, function (index, item) {
                    select.append($("<option>").val(item.value).text(item.text));
                });
            }
        });
    });
</script>

在代码中，我们使用cshtml视图模板来呈现下拉列表框和JavaScript代码。我们声明了一个SelectItem模型，该模型表示下拉列表框的每个选项。我们在视图模板中声明了一个下拉列表框，并在JavaScript中使用ajax()方法从服务器获取数据并将其填充到下拉列表框中。

结论

本文介绍了如何使用jQuery和MVC JsonResult来填充下拉列表框。开发人员可以使用本文中的示例代码来实现在自己的Web应用程序中获取并填充下拉列表框。