2

我有 2 个下拉列表已经绑定在 pageload 上，我想在触发 ajax 函数后重新绑定这两个下拉列表。这里我编写了一个 sql server 存储过程来获取下拉列表所需的数据。但是我将如何获得值到下拉列表，这样就可以使用ajax函数绑定新数据了。屏幕是用Asp.net C#编码开发的。

4

3 回答 3

3

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

这是在ajax调用方法中使用的方法，调用PopulateControl方法绑定Drop down List

function OnCoursePopulated(response) {

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

}

这是 PopulateControl 方法的描述

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

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

于 2012-06-05T09:02:19.437 回答
2

您可以尝试以下作为演示。服务器端 DropDownLists 被替换为 HTML 选择元素，因此不会发生异常“无效的回发或回调参数”。此演示的缺点是回发后不会在表单上恢复值。您可以将其放在 Default.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>

然后将这些方法放在 Default.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();
    }
于 2012-06-05T09:20:43.703 回答
1

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

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

您应该阅读“值”和文本并生​​成此> <option value="value">text</option> 并附加到 ddl

于 2012-06-05T07:46:55.847 回答