Question

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

Answer 1

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

}

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

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

Answer 2

您可以尝试以下演示。服务器端DropDownLists被HTML select元素替换，因此不会发生异常“无效的回发或回调参数”。这个演示中的缺点是回发后表单上没有恢复值。您可以将它放在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();
    }

Answer 3

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

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

你应该读“价值”＆amp;文本并生成此＆gt; <option value="value">text</option> 并附加到ddl

使用Ajax AutoPopulate DropDownList

3 个答案: