使用 Ajax 自动填充 DropDownList

本文关键字：填充 DropDownList Ajax 使用 | 更新日期: 2023-09-27 18:36:25

我有 2 个下拉列表已经在页面加载时绑定，我想在触发 ajax 函数后重新绑定这两个下拉列表。在这里，我编写了一个sql服务器存储过程来获取下拉列表所需的数据。但是我将如何将值获取到下拉列表，以便它可以使用 ajax 函数绑定新数据。屏幕是使用 Asp.net C# 编码开发的。

使用 Ajax 自动填充 DropDownList

这是 asp.net 的下拉列表

<asp:DropDownList id="ddlCourse" runat="server" AutoPostBack="false" 
                                    Height="28px" title="Select Course" Width="290px" 
      ></asp:DropDownList>

这是调用 Web 服务方法的 jQuery 方法 

function BindCourse() {
    $.ajax({
        type: "POST",
        url: "/WebService/CollegeWebService.asmx/GetCourseDetails",
        data: "{}",
        async: true,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnCoursePopulated,      
        error: function (xml, textStatus, errorThrown) {
            alert('error');
            alert(xml.status + "||" + xml.responseText);
        }
    });
}

这是在ajex调用方法中使用的方法，并调用PopulateControl方法以绑定下拉列表

function OnCoursePopulated(response) {
    PopulateControl(response.d,   $('#<%=ddlCourse.ClientID %>'));
}

下面是填充控件方法的说明

function PopulateControl(list, control) {
    if (list.length > 0) {
        control.removeAttr("disabled");
        control.empty().append('<option selected="selected" value="0">Please select</option>');
        $.each(list, function () {

            control.append($("<option></option>").val(this['Value']).html(this['Text']));
        });
    }
    else {
        control.empty().append('<option selected="selected" value="0">Not available<option>');
    }
}

因此，您最终绑定了下拉列表

您可以尝试以下演示。服务器端下拉列表将替换为 HTML 选择元素，以便不会发生异常"无效的回发或回调参数"。此演示的缺点是回发后不会在窗体上还原值。您可以将其放在默认.aspx的表单中：

<script type="text/javascript" 
 src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    function populate(populateInitial) {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '/Default.aspx/populate',
            data: "{'populateInitial': '" + populateInitial + "'}",
            dataType: "json",
            async: false,
            success: function(result) {
                var ddlItems = document.getElementById('ddlItems');
                ddlItems.options.length = 0;
                $.each(result.d, function(key, item) 
                 { ddlItems.options[key] = new Option(item); });
            }
        });
    }
</script>
<form id="form1" runat="server">
<div>     
    <select id="ddlItems" name="ddlItems">
    </select>
    <br />
    <input type="button" onclick="populate('0');" value="Change values" />
    <br />
    Selected item: 
      <asp:Label ID="lblSelectedItem" runat="server" Text=""> </asp:Label>
    <br />
    <asp:Button ID="Button1" runat="server" 
     Text="Write out selected item text" />
</div>
<script type="text/javascript">
    populate('1');
</script>

你把这些方法放在默认.aspx.cs：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            lblSelectedItem.Text = Request["ddlItems"].ToString();
        }
    }
    [System.Web.Services.WebMethod()]
    [System.Web.Script.Services.ScriptMethod()]
    public static List<string> populate(string populateInitial)
    {
        if (populateInitial == "1")
            return (new string[] { "a", "b" }).ToList();
        else
            return (new string[] { "c", "d", "e", "f" }).ToList();
    }

你应该让 Ajax 调用某种页面（我建议你添加 Generic Hanlder），它响应 xml 或 json 甚至 html，下拉值和文本字段值，而不是在 javascript jquery 中读取它并为你的下拉菜单生成 html，如下所示

   <select id="ddl">
        <option value="value">text</option>
    </select>

你应该阅读"值"和文本并生成这个> <option value="value">text</option>并追加到 DDL

相关文章：