通过AJAX调用页面后台代码方法实现省级三级联动效果（简单练习）前台

本文链接：https://blog.csdn.net/hjingtao/article/details/7435732

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!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="jquery-1.7.2.js" type="text/javascript"></script>
    <script type="text/javascript">
     $(function () {
         $("#ProvinceList").bind("keyup change", function (e) {
        e.preventDefault();                // 首先初始化
        $("#CityList").empty().append($("<option></option>").val("0").html(" --- 请选择 --- "));
            if ($(this).val() != "0") {
            sendData($(this).val());
             }
    });

    $("#CityList").bind("keyup change", function (e) {
        e.preventDefault();                // 首先初始化
        $("#Dist").empty().append($("<option></option>").val("0").html(" --- 请选择 --- "));
        if ($(this).val() != "0") {
            sendData2($(this).val());
        }
    });
                function sendData(sBuyID) {

                     $.ajax({
                      type: "POST",
                       url: "Default3.aspx/GetSubList", // 调动后台页面方法
                         data: '{"sBuyID":"' + sBuyID + '"}',
                         contentType: "application/json; charset=utf-8",
                          dataType: "json",
                           success: function (msg) {
                            // msg.d是数组，由后台数组ArrayList返回，因此可以遍历每个元素
                             $.each(msg.d, function () {
                                 // this.Value和this.Text是后台返回数组ArrayList类型包含元素ListItem类型的属性
                                 $("#CityList").append($("<option></option").val(this.Value).html(this.Text));
                             });
                         },
                         error: function () {
                             alert("ajax请求发生错误");
                         }
                     });
                 }

function sendData2(sdrID) {

                     $.ajax({
                         type: "POST",
                         url: "Default3.aspx/GetdrList", // 调动后台页面方法
                         data: '{"sdrID":"' + sdrID + '"}',
                         contentType: "application/json; charset=utf-8",
                         dataType: "json",
                         success: function (msg) {
                             // msg.d是数组，由后台数组ArrayList返回，因此可以遍历每个元素
                             $.each(msg.d, function () {
                                 // this.Value和this.Text是后台返回数组ArrayList类型包含元素ListItem类型的属性
                                 $("#Dist").append($("<option></option").val(this.Value).html(this.Text));
                             });
                         },
                         error: function () {
                             alert("ajax请求发生错误");
                         }
                     });
                 }
             });

                                       </script>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
   <fieldset style="width: 480px; height: 150px;">
    <table border="0" cellpadding="10" cellspacing="10">
     <tr>
      <td>
      <asp:DropDownList ID="ProvinceList" runat="server" Width="120px">
      <asp:ListItem Value="0" Text=" --- 请选择省份 --- "></asp:ListItem>
       <asp:ListItem Value="1" Text="河北"></asp:ListItem>
      <%-- <asp:ListItem Value="2" Text="江苏"></asp:ListItem> --%>
       </asp:DropDownList>
         </td>
          <td>
           <asp:DropDownList ID="CityList" runat="server" Width="120px">
             <asp:ListItem Value="0" Text=" --- 请选择城市 --- "></asp:ListItem>
              </asp:DropDownList>
                </td>
                      <td>
           <asp:DropDownList ID="Dist" runat="server" Width="120px">
             <asp:ListItem Value="0" Text=" --- 请选择乡镇 --- "></asp:ListItem>
              </asp:DropDownList>
                </td>
                 </tr>
                 </table>
                 </fieldset>
                  </div>
                  </form>
                  </body>
</html>