如何使用jquery在下拉列表中绑定数据？

Posted 2023-04-13

【中文标题】如何使用jquery在下拉列表中绑定数据？

【英文标题】：How to bind data in dropdown using jquery?

【发布时间】：2021-08-30 12:51:41

【问题描述】：

这是我的代码。单击“添加项目”按钮时调用函数 AddRow。调试后发现ajax调用没有执行，这是什么问题？

function AddRow() 
            debugger;
            $.ajax(
                type: "POST",
                dataSource: [@(javascriptArray(Model.Categories.Select(x => new  CategoryId = x.CategoryId,Category=x.Category, Display = $"x.Category" ).OrderBy(x => x.Display)))],
                dataType: "json",
                contentType: "application/json",
                success: function (res) 
                    debugger;
                    $.each(res.d, function (data, value) 
                        $("#category").append($("<option></option>").val(value.categoryId).html(value.category));
                    );
                

            );

                var row = "<tr>" +
                    "<td><input type='text' style='max-width: 300px' id='title' class='form-control' /></td>" +
                    "<td><select class='form-control' style='width: 120px;height:38px' id='category'><option value='0'></option></select></td>" +
                    //"<td><input type='text' style='max-width: 90px' name='category' id='category' class='form-control' placeholder='Category...' /></td>" +
                    "<td><input type='number' style='max-width: 75px' id='price' min=0 class='form-control' /></td>" +
                    "<td><input type='number' style='max-width: 75px' id='quantity' min=0 class='form-control' /></td>" +
                    "<td><input type='button' value='Add' onclick='addItem()' class='btn btn-success'/>&nbsp&nbsp" +
                    "<input type='button' value='Cancel' onclick='deleteNewItem(this)'name='removeLines[0]' class='btn btn-danger'  />"  +
                    "</td>" +
                    "</tr>";
                $('#CartTableBody').prepend($(row));

        

我已经使用提供数据的操作方法更新了 url，但仍然显示警告错误消息

 $(document).ready(function () 
            debugger;
            $.ajax(
                type: "Get",
                url: "@Url.Action("GetCategory", "Release")",
                dataType: "json",
                contentType: "application/json",
                success: function (res) 
                    debugger;
                    $.each(res.d, function (data, value) 
                        $("#category").append($("<option></option>").val(value.categoryId).html(value.category));
                    );
                ,
                error: function (Result) 
                    alert("Error");
                

            );
        )

【问题讨论】：

开发者控制台有错误吗？尝试调试这个：$.ajax(...).done(function(response)).fail(function(error))

【参考方案1】：

据我所知，jquery ajax函数不包含datasource参数。

我建议您可以使用F12浏览器开发工具查看点击Add Item按钮时的详细错误信息。

此外，ajax 将包含 url，让您的客户端向服务器端发布一些消息，服务器端向客户端返回响应。

如果你想知道如何使用 ajax 将行追加到表中，我建议你可以参考这个example。

【讨论】：

如果无法使用数据源，如何将来自过程调用（来自查询处理函数）的数据绑定到下拉列表

你应该使用sql查询来查询数据库并返回action方法中的模型。 Asp.net 核心会将模型数据转换为 json 数据到客户端，然后在成功方法中，您可以使用 js 代码将该 json 绑定到下拉列表。

您能分享您的Url.Action("GetCategory", "Release") 操作代码吗？它返回了哪个结果？

【参考方案2】：

           $.ajax(
                url: "YourUrl",
                type: "YourMethod",
                data: 
                ,
            ).done(function (data) 
                var dropdown= $("#dropdown");
                    dropdown.html("");
                _.each(data, function (item) 
                    dropdown.append("<option value = '" + item.id+ "'>" + item.value+ "</option>");
                );
         
            ).fail(function (ex) 
                alert("Error");
            );