Jquery+Ajax下拉框级联查询

标签：

Jquery代码  

<script type="text/javascript">
          $(function(){

             //提交事件
           $("#ImageButton1").click(function(){

            //省Id
        var provinceId=$("#selProvince").val();

           //市Id
        var cityId=$("#selCity").val();
        //区县Id

        var districtId=$("#selDistrict").val();
        //把省市区ID赋值到隐藏域

        $("#hidProvince").attr("value",provinceId);
         $("#hidCity").attr("value",cityId);
          $("#hidDistrict").attr("value",districtId);
          });
            //加载地区
         var area=$("#hidArea").val();  //后台将（省，市，区）ID放到隐藏域hidArea
//         alert(area);
         loadArea(0,0,area);//Ajax方法查询默认（北京，北京，朝阳）
         $("#selProvince").change(function(){//存放省的下拉框发生变化时调用Ajax
        loadArea(this.value,1,"");
        });
        $("#selCity").change(function(){//存放市的下拉框发生变化时调用Ajax
        loadArea(this.value,2,"");
         });

    //id:省（0）市县id，type：0为省，1为市，2县，area：北京,北京,朝阳区
function loadArea(id,type,area){
    $.ajax({
        type:"get",
        url:"/ashx/GetArea.ashx",
        data:{Id:id,type:type},
        dataType:"json",
        success:function(data){
            var str="";
            var areaArr=area.split(",");
            if(type==0){
                $.each(data,function(i,item){
                    str=str+"<option value=\""+item.Id+"\">"+item.Name+"</option>";
                })
                var selProvince=$("#selProvince");
                selProvince.html(str);
                if(areaArr[0])
                {
                    selProvince.val(areaArr[0]);
                }
                loadArea(selProvince.val(),1,area);
            }
            if(type==1){
                $.each(data,function(i,item){
                    str=str+"<option value=\""+item.Id+"\">"+item.Name+"</option>";
                })
                var selCity=$("#selCity");
                selCity.html(str);
                if(areaArr[1])
                {
                    selCity.val(areaArr[1]);
                }
                loadArea(selCity.val(),2,area);
            }
            if(type==2){
                $.each(data,function(i,item){
                    str=str+"<option value=\""+item.Id+"\">"+item.Name+"</option>";
                })
                var selDistrict=$("#selDistrict");
                selDistrict.html(str);
                if(areaArr[2])
                {
                    selDistrict.val(areaArr[2]);
                }
                //$("#selDistrict")
            }
        }
        
    });
    }
        </script>

  aspx页面代码

<div class="ptop1">填写联系地址：<span class="spanlv">*</span></div>
                <div class="ptop2">
                 <select id="selProvince" runat="server">
                </select>
                <select id="selCity" runat="server">
                </select>
                <select id="selDistrict" runat="server">
                </select>

                <input type="hidden" id="hidArea" value="" runat="server" />
                <input type="hidden" runat="server" id="hidProvince" />
                <input type="hidden" runat="server" id="hidCity" />
                <input type="hidden" runat="server" id="hidDistrict" />
             
             </div>

一般处理程序 源码

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using BLL;
using Newtonsoft.Json;
using System.Collections.Generic;
using Model;
using Common;
using Model.Linq;

namespace Web.ashx
{
    /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class GetArea : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int id = 0;
            string strId = context.Request.QueryString["Id"];
            //类型：省0，市1，县2
            string type = context.Request.QueryString["type"];
            if (!string.IsNullOrEmpty(strId))
            {
                id = Convert.ToInt32(strId);
            }
            phDataContext ph = new phDataContext();
            string result = "";
            if (type == "0")
            {
                result = ConvertHelper.DataToJson(ph.Province.Select(p=> new { p.Id, p.Name}));
                context.Response.Write(result);
            }
            if (type == "1")
            {
                result = ConvertHelper.DataToJson(ph.City.Where(c => c.ProvinceId == id).Select(c => new { c.Id,c.Name }));
                context.Response.Write(result);
            }
            if (type == "2")
            {
                result = ConvertHelper.DataToJson(ph.District.Where(c => c.CityId == id).Select(d => new { d.Id, d.Name }));
                context.Response.Write(result);
            }
            //context.Response.Write(result);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

后台代码

//这个就是给hidArea隐藏域赋值

  if (!pm01.Area.IsNullOrEmptyOrWhiteSpace())
                    {
                        //this.hidArea.Value = pm01.Area;
                        hidArea.Value = pm01.ProvinceId + "," + pm01.CityId + "," + pm01.DistrictId;
                    }

自从用了ajax就停不下来了  (ˇ?ˇ) 想～

Jquery+Ajax下拉框级联查询

标签：

原文地址：http://www.cnblogs.com/LOVEJIEYING/p/5498972.html