ajax 实现三级联动功能

本文介绍如何使用AJAX实现省市县三级级联下拉框功能,包括配置web.config、添加引用、编写.CS文件及JavaScript代码等步骤,并提供了一个简单的示例数据库结构。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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控件

给前两个控件添加onchange="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

border="0" src="http://forum.booye.com/byhtm/1.html" frameborder="0" width="470" height="60">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值