AJAX下拉框联动

  1 function getProvince() {
  2     var ProName = $("#dvProv").val();
  3     LoadProvince(ProName);
  4 }
  5 function getCity() {
  6     var CityName = $("#dvCity").val();
  7     LoadBus(CityName);
  8 }
  9 function getArea() {
 10     var AreaName = $("#dvDealer").val();
 11     LoadAdd(AreaName);
 12 
 13 }
 14 //查询市
 15 function LoadProvince(proname) {
 16     
 17     $.ajax({
 18         type: "post",
 19         dataType: "json",
 20         url: "/ashx/Province.ashx",
 21         data: {
 22             proName: proname,
 23         },
 24         success: function (data) {
 25             var table = data.data.Rows;
 26             var contentcity = "";
 27             if (table.length > 0) {
 28                 contentcity += "<option value=\"\">请选择市</option>  ";
 29                 for (var i = 0; i < table.length; i++) {
 30                     contentcity += "<option value=\"" + table[i]["city"] + "\" >" + table[i]["city"] + "</option>  ";
 31                 }
 32                 $("#dvCity").html(contentcity);
 33 
 34             }
 35 
 36         },
 37         error: function () {
 38             alert("ajax error");
 39         }
 40     });
 41 }
 42 //查询经销商
 43 
 44 function LoadBus(cityname) {
 45    
 46     $.ajax({
 47         type: "post",
 48         dataType: "json",
 49         url: "/ashx/Dealer.ashx",
 50         data: {
 51             cityName: cityname,
 52         },
 53         success: function (data) {
 54             var table = data.data.Rows;
 55             var contentDealer = "";
 56             if (table.length > 0) {
 57                 contentDealer += "<option value=\"\">请选择经销商</option>  ";
 58                 for (var i = 0; i < table.length; i++) {
 59                     contentDealer += "<option value=\"" + table[i]["DealersName"] + "\" >" + table[i]["DealersName"] + "</option>  ";
 60                 }
 61                 $("#dvDealer").html(contentDealer);
 62 
 63             }
 64 
 65         },
 66         error: function () {
 67             alert("ajax error");
 68         }
 69     });
 70 }
 71 
 72 //经销商地址
 73 
 74 function LoadAdd(deaname) {
 75    
 76     $.ajax({
 77         type: "post",
 78         dataType: "json",
 79         url: "/ashx/BusAdd.ashx",
 80         data: {
 81             deaName: deaname
 82         },
 83         success: function (data) {
 84             var table = data.data.Rows;
 85             var contentadd = "";
 86             if (table.length > 0) {
 87 
 88                 for (var i = 0; i < table.length; i++) {
 89                     contentadd = table[i]["location"];
 90                 }
 91 
 92                 $("#dvAddr1").val(contentadd);
 93                 $("#dvAddr").html(contentadd);
 94 
 95             }
 96 
 97         },
 98         error: function () {
 99             alert("ajax error");
100         }
101     });
102 }

<%@ WebHandler Language="C#" Class="Province" %>

using System.Web;
using Maticsoft.DBUtility;
using System.Data;
using System.Data.SqlClient;
using MT.Business;
using Solucky;


public class Province : IHttpHandler {

    protected string proName = "";
    
    public void ProcessRequest (HttpContext context)
    {
        context.Response.ContentType = "application/json";
        proName =PageValidate.SqlTextClear(context.Request["proName"]);
        try
        {
            string str= GetCitycode(context);
            context.Response.Write("{\"data\":" + str + "}");
        }

        catch (System.Exception ex)
        {
            throw;
        }
        
    }

    /// <summary>
    /// 查询城市
    /// </summary>
    public string GetCitycode(HttpContext context)
    {
        string result = "";

        string sql = "SELECT DISTINCT city,Citycode FROM B_Dealer where province=@proName";
        SqlParameter[] sqlParams = {
            new SqlParameter("@proName",SqlDbType.NVarChar,20),
            };
        sqlParams[0].Value = proName;
        DataTable dt = DbHelperSQL.Query(sql, sqlParams).Tables[0];
        Json json = new Json();
        string  dtdata = json.Convert2Json(dt);
        return dtdata;
    }

    public bool IsReusable
    {
        get {
            return false;
        }
    }

}

 

<div class="row">
                                <div class="form-group col-xs-6">
                                    <label class="control-label"><i class="must">*</i>经销商省市</label>
                                    <div class="form-group-bd">
                                        <div class="frm-choose-area">
                                            <div class="frm-col-box col-xs-6">
                                                <select class="form-control" name="dvProv" id="dvProv" οnchange="getProvince()">
                                                    <option value="">请选择省</option>
                                                    <asp:Repeater ID="repProvince" runat="server">
                                                        <ItemTemplate>
                                                            <option value="<%#Eval("province")%>"><%#Eval("province")%></option>
                                                        </ItemTemplate>
                                                    </asp:Repeater>
                                                </select>
                                            </div>
                                            <div class="frm-col-box col-xs-6">
                                                <select class="form-control" name="dvCity" id="dvCity" οnchange="getCity()">
                                                    <option value="">请选择市</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-xs-6">
                                    <label class="control-label" for="dvDealer"><i class="must">*</i>经销商选择</label>
                                    <div class="form-group-bd">
                                        <select class="form-control" name="dvDealer" id="dvDealer" οnchange="getArea()">
                                            <option value="">请选择经销商</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group frm-dvAddr-box">
                                    <label class="control-label">经销商地址</label>
                                    <div class="form-group-bd">
                                        <div class="form-control" id="dvAddr"></div>
                                        <input type="hidden" name="dvAddr1" id="dvAddr1" class="form-control">
                                    </div>
                                </div>
                            </div>

 

转载于:https://www.cnblogs.com/LiYi-Dao/p/8108290.html