ajax 实现三级联动功能

border="0" src="http://forum.booye.com/byhtm/1.html" frameborder="0" width="470" height="60">

注意:

 var name=dt.Rows[i].areaname; 　　　　　　 var id=dt.Rows[i].areaid;

areaname ,areaid 的大小写 很关键 ,写错就看不到结果

这个小功能没有进行细节处理,可能要根据情况,自已增修一些代码

如果需要完整代码 只要在JS中修改就可以.

====================================================

步骤一:下载ajaxPro.dll文件 放到BLL文件里,添加引用.

修改web.config 在<system.web>签记中添加

<httpHandlers>
  <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro" />
 </httpHandlers>

在.CS文件的page_load 中添加

AjaxPro.Utility.RegisterTypeForAjax(typeof(类名));//注册两个JS引用

在.CS文件中在写一个方法共AJAX使用

 [AjaxPro.AjaxMethod]
  public DataTable GetArea(int parentid)
  {
      //-----
  }

步骤二:

在ASPX页面上放三个dropdownlist控件

给前两个控件添加οnchange="loaddata(this,控件ID)"

步骤三:

写AJAX代码

< script language = javascript >
             var  targetid;
             function  loaddata(obj,targetobj)
             ... {
                targetid = targetobj;
                var areaid = obj.options[obj.selectedIndex].value;//取得选中编号
                WebClass.Classlist.GetArea(areaid,result_CallBack);//获取子分类
            }
             function  result_CallBack(response)
             ... {
                if(response.value!=null)
                ...{
                    var dt = response.value;//.Tables[0];
                    if(dt!=null)
                    ...{
                        document.getElementById(targetid).length=0;//清空　　　　                
                        for(var i=0; i<dt.Rows.length; i++)
　　　　                ...{
　　　　                    var name=dt.Rows[i].areaname;
　　　　　　                var id=dt.Rows[i].areaid;
　　　　　　                document.getElementById(targetid).options.add(new Option(name,id));
　　　　                }
                    }
                }
            }
         </ script >

数据库

 

CREATE DATABASE Class
go
CREATE TABLE Area
(
    areaId int identity(1,1) primary key,
    areaName varchar(100),
    parentId int
)
go
insert into Area(areaname,parentId) values('省A',0)
insert into Area(areaname,parentId) values('省B',0)

insert into Area(areaname,parentId) values('市1',1)
insert into Area(areaname,parentId) values('市2',1)
insert into Area(areaname,parentId) values('市3',2)
insert into Area(areaname,parentId) values('市4',2)

insert into Area(areaname,parentId) values('市1县1',3)
insert into Area(areaname,parentId) values('市1县2',3)
insert into Area(areaname,parentId) values('市2县1',4)
insert into Area(areaname,parentId) values('市2县2',4)

insert into Area(areaname,parentId) values('市3县1',5)
insert into Area(areaname,parentId) values('市3县2',5)
insert into Area(areaname,parentId) values('市4县1',6)
insert into Area(areaname,parentId) values('市4县2',6)
GO
CREATE PROC pro_sns_area_Select
(
    @areaId int
)
as
select areaid,areaname from Area where parentId = @areaId

<script language="javascript" type="text/javascript"> var targetid; function loaddata(obj,targetobj) { targetid = targetobj; var areaid = obj.options[obj.selectedIndex].value;//取得选中编号 WebClass.Classlist.GetArea(areaid,result_CallBack);//获取子分类 } function result_CallBack(response) { if(response.value!=null) { var dt = response.value;//.Tables[0]; if(dt!=null) { document.getElementById(targetid).length=0;//清空　　　　 for(var i=0; i border="0" src="http://forum.booye.com/byhtm/1.html" frameborder="0" width="470" height="60">