Ajax无刷新实现省市联动，并在回发后保留省市下拉框状态

zoukankan html css js c++ java

Ajax无刷新实现省市联动，并在回发后保留省市下拉框状态

功能说明：1、实现省市无刷新联动，并在回发后保留省市下拉框状态

              2、使用jquery+AjaxPro实现，也可用xmlhttprequest+ashx实现，原理一样

前台代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://www.cnblogs.com/http://www.cnblogs.com/Content/Script/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //【省份】-【城市】关系
            $("#<%=ddlProvince.ClientID %>").change(function () {
                var res = Views_JsAndJquery_Ajax_Common_TwoGrade.BindCity(this.value).value;
                $("#<%=ddlCity.ClientID %>").empty().html(res);
                $("#<%=hdCity.ClientID %>").val(res);
                $("#<%=hdCitySelectedValue.ClientID %>").val('');
            });

            $("#<%=ddlCity.ClientID %>").change(function () {  //保存城市下来选择值
                $("#<%=hdCitySelectedValue.ClientID %>").val($("#<%=ddlCity.ClientID %>").val());
            });

            //页面加载时，恢复之前【城市】下拉框状态
            if ($("#<%=hdCity.ClientID %>").val() != "") {
                if ($("#<%=ddlProvince.ClientID %>").val() != '') {
                    $("#<%=ddlCity.ClientID %>").empty().html($("#<%=hdCity.ClientID %>").val());  //重新加载【城市】数据
                    $("#<%=ddlCity.ClientID %>").val($("#<%=hdCitySelectedValue.ClientID %>").val()); //恢复之前选择的值
                }
                else {  //如果省份下拉框选择第一项则清空城市下拉框对应的隐藏值
                    $("#<%=hdCity.ClientID %>").val('');
                    $("#<%=hdCitySelectedValue.ClientID %>").val('');
                }
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <%--存放省份所对应的城市信息--%>
    <asp:HiddenField ID="hdCity" runat="server" />
    <%--存放城市下拉框选择的值 --%>
    <asp:HiddenField ID="hdCitySelectedValue" runat="server" />
    <div>
        <asp:DropDownList ID="ddlProvince" runat="server">
        </asp:DropDownList>
        <asp:DropDownList ID="ddlCity" runat="server">
        </asp:DropDownList>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </div>
    </form>
</body>
</html>

后台代码：

public partial class Views_JsAndJquery_Ajax_Common_TwoGrade : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(Views_JsAndJquery_Ajax_Common_TwoGrade));  //每次回发都得重新注册
        if (!IsPostBack)
        {
            BindProvince();
            this.ddlCity.Items.Add("请选择");
        }
    }
    private void BindProvince()  //绑定省份
    {
        this.ddlProvince.Items.Add(new ListItem("请选择", string.Empty));
        this.ddlProvince.Items.Add(new ListItem("湖北", "01"));
        this.ddlProvince.Items.Add(new ListItem("湖南", "02"));
    }
    /// <summary>
    /// 绑定城市
    /// </summary>
    /// <returns></returns>
    [AjaxPro.AjaxMethod]
    public string BindCity(string parProvinID)
    {
        StringBuilder st = new StringBuilder();

        st.Append("<option value=\"" + string.Empty + "\">" + "请选择" + "</option>\n");

        if (parProvinID != string.Empty)
        {
            if (parProvinID == "01")
            {
                st.Append("<option value=\"01\">武汉</option>\n");
                st.Append("<option value=\"02\">孝感</option>\n");
            }
            else if (parProvinID == "02")
            {
                st.Append("<option value=\"01\">长沙</option>\n");
                st.Append("<option value=\"02\">岳阳</option>\n");
            }
        }
        return st.ToString();
    }
    protected void Button1_Click(object sender, EventArgs e)  //获取下拉框值
    {
        string str = this.ddlProvince.SelectedValue;    //省份下拉框
        string str2 = Request[this.ddlCity.UniqueID];  //城市下拉框的seelctedvalue
        string str3 = this.hdCitySelectedValue.Value;  //城市下拉框的seelctedvalue
    }
}

会出现的异常信息（下面解决方法会影响安全，并不是最好的方法）

一、从客户端中检测到有潜在危险的 Request.Form 值
解决方法： <%@ Page  ValidateRequest="false"

二、回发或回调参数无效。在配置中使用 <pages enableEventValidation="true"/>

解决方法： <%@ Page  EnableEventValidation="false"

查看全文

相关阅读:
题解 DTOJ #1438. 矮人排队（lineup）
题解 DTOJ #4423. 「THUSC2019」塔
 题解 DTOJ #4123.「2019冬令营提高组」全连
 题解 DTOJ #4016.辉夜的夜空明珠（moon）
题解 DTOJ #2498.大步小步（babystep）
题解 DTOJ #3326.组队（group）
题解 DTOJ #1515.三塔合一
 题解 DTOJ #2305.Bazarek
【code】Splay 模板
 寻找乱序数组中第K大的数

原文地址：https://www.cnblogs.com/gossip/p/1980179.html