ajax实现无刷新省市县三级联动

本文实例为大家分享了创建交互式、快速动态网页应用的网页开发技术实现无刷新省市县三级联动的具体代码，供大家参考，具体内容如下

效果图：

实现代码：

1、html:

html标题标题/标题样式类型=' text/CSS '选择{ width : 150 px}/style脚本src=' http : js/Jquery1。7 .js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){ $).ajax({ type: 'post '，内容类型： ' application/JSON '，URL : ' webservice1。asmx/GetProvince '，数据： ' } '，成功：函数(结果){ var stroption=for(var I=0；我结果d。长度；I){ stroption=' option value='结果。国防工业.省份idstroption=result.d[i].provincenamestroption='/option '；} $(' # sep providence ').追加（存储选项);} })$(' # sep providence ').change(function(){ $(' # secity option : gt(0)')).移除();$(' # searea options : gt(0)').移除();$.ajax({ type: 'post '，内容类型： ' application/JSON '，URL : ' webservice 1。asmx/getcity bypro '，data: '{proid:'' $(this)).val() ''} '，成功：函数（结果){ var stro city=for(var I=0；我结果d。长度；I){ stro city=' option value='结果。国防工业.城市idstrocity=result.d[i].city name stro city='/option '；} $('#secity ').追加(斯特罗市)；} }) }) $('#secity ').change(function(){ $(' # searea options : gt(0)')).移除();$.ajax({ type: 'post '，内容类型： ' application/JSON '，URL : ' web service 1。asmx/getarebycity '，data: '{cityid:'' $(this).val() ''} '，成功：函数（结果){ var stro area=for(var I=0；我结果d。长度；I){ stro area=' option value='结果。国防工业.区域idstroarea=result.d[i].area name stro area='/option '；} $(' # sea ea ').追加(stro地区)；} })}))})/脚本/床头柜tr td用户名TD/TD输入id='Text1 '类型='文本'/TD/tr/TD密码TD/TD输入id='Text2 '类型='文本'/TD/tr/TD确认密码TD/TD输入id='Text3 '类型='文本'/TD/tr/TD邮箱TD/TD输入id='Text4 '类型='文本'/TD/tr/TD地址TD/TD选择id=' seprovince '选项-请选择-/选项/选择省选择id='secity '选项-请选择-/选项/选择市选择id=' searea '选项-请选择-/选项/选择县/td /tr /table/body/html2、WebService1.asmx

使用系统；使用系统。集合。通用；使用系统Linq .使用系统网络.使用系统。网络服务；命名空间省市县三级联动{ ///summary ///WebService1的摘要说明////摘要[WebServiCe(NameSpace=' http://tempuri。org/')][WebServiceBinding(CONFOrmSTO=WSiprofiles .基础cprofile 1 _ 1)][系统组件模型。工具箱项(false)]//若要允许使用ASP。专题从脚本中调用此网服务，请取消对下行的注释[系统。公共类网络服务1 :系统网络。服务。webservice {[WebMethod]公共字符串hello world(){ 0返回《你好，世界》；}[WebMethod]public listmodel。vehicle GetProvince(){ bll。车辆bpro=新bll。车辆()；ListModel。省份列表=bpro .getlistmode()；退货清单；}[WebMethod]public listmodel。city getcity bypro(字符串proid){ bll。城市bccity=新bll。city()；ListModel.city list=bcity城市城市. GetListModel('父亲=' proid ' ' ')；退货清单；}[WebMethod]public listmodel。区域植被密度(字符串城市id){ bll。barea区域=新bll。面积()；ListModel.area list=barea .GetListModel('父亲='城市id ' ' ')；退货清单；} }}在三层的基地址定位连接层中的city.cs和area.cs中分别添加以下属性

//城市。cs:public listmode。city getlistmode(string strsql){ return dal .getlistmode(strsql)；}//面积。cs:public listmode。区域getlistmode(字符串strsql){ return dal .getlistmode(strsql)；}在三层的木豆层中的city.cs和area.cs中分别添加以下方法

//city.cs:公共系统。集合。集合。通用。列表模型。城市列表=新系统收藏。通用。列表模式。city()；数据表dt=GetList(strsql).表[0];foreach(dt中的记录行行){ model。城市mcity=新模式。city()；mcity.id=Convert .ToInt32(行[' id '])；mcity.cityID=row['cityID'].ToString()；mcity.cityname=row['cityname'].ToString()；名单添加(mcity );}返回列表；}//area.cs:公共系统收藏。通用。列表模型。区域GetListModel(字符串strsql){ DataTable dt=GetList(strsql)} .表[0];系统。集合。类属。列表模型。区域列表=新系统收藏。通用。列表模式。面积()；foreach(dt中的记录行。行){ model。area marea=新车型。面积(){ id=Convert .ToInt32(行['id'])，areaID=行[' Areid '].ToString()，areaname=row['areaname'].ToString()}；名单添加(marea)；}返回列表；}以上就是本文的全部内容，希望对大家的学习有所帮助。