本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码，供大家参考，具体内容如下
效果图：
实现代码：
1、html：
<html> <head> <title></title> <style type="text/css"> select { width: 150px; } </style> <script src="js/jquery1.7.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $.ajax({ type: post, contenttype: application/json, url: webservice1.asmx/getprovince, data: {}, success: function (result) { var stroption = ''; for (var i = 0; i < result.d.length; i++) { stroption += '<option value=' + result.d[i].provinceid + '>'; stroption += result.d[i].provincename; stroption += '</option>'; } $('#seprovince').append(stroption); } }) $('#seprovince').change(function () { $('#secity option:gt(0)').remove(); $('#searea option:gt(0)').remove(); $.ajax({ type: post, contenttype: application/json, url: webservice1.asmx/getcitybypro, data: {proid:' + $(this).val() + '}, success: function (result) { var strocity = ''; for (var i = 0; i < result.d.length; i++) { strocity += '<option value=' + result.d[i].cityid + '>'; strocity += result.d[i].cityname; strocity += '</option>'; } $('#secity').append(strocity); } }) }) $('#secity').change(function () { $('#searea option:gt(0)').remove(); $.ajax({ type: post, contenttype: application/json, url: webservice1.asmx/getareabycity, data: {cityid:' + $(this).val() + '}, success: function (result) { var stroarea = ''; for (var i = 0; i < result.d.length; i++) { stroarea += '<option value=' + result.d[i].areaid + '>'; stroarea += result.d[i].areaname; stroarea += '</option>'; } $('#searea').append(stroarea); } }) }) }) </script> </head> <body> <table> <tr> <td> 用户名 </td> <td> <input id="text1" type="text" /> </td> </tr> <tr> <td> 密码 </td> <td> <input id="text2" type="text" /> </td> </tr> <tr> <td> 确认密码 </td> <td> <input id="text3" type="text" /> </td> </tr> <tr> <td> 邮箱 </td> <td> <input id="text4" type="text" /> </td> </tr> <tr> <td> 地址 </td> <td> <select id="seprovince"> <option>--请选择--</option> </select> 省 <select id="secity"> <option>--请选择--</option> </select>市 <select id="searea"> <option>--请选择--</option> </select>县 </td> </tr> </table> </body> </html>
2、webservice1.asmx
using system; using system.collections.generic; using system.linq; using system.web; using system.web.services; namespace 省市县三级联动 { /// <summary> /// webservice1 的摘要说明 /// </summary> [webservice(namespace = http://tempuri.org/)] [webservicebinding(conformsto = wsiprofiles.basicprofile1_1)] [system.componentmodel.toolboxitem(false)] // 若要允许使用 asp.net ajax 从脚本中调用此 web 服务，请取消对下行的注释。 [system.web.script.services.scriptservice] public class webservice1 : system.web.services.webservice { [webmethod] public string helloworld() { return hello world; } [webmethod] public list<model.province> getprovince() { bll.province bpro = new bll.province(); list<model.province> list = bpro.getlistmodel(); return list; } [webmethod] public list<model.city> getcitybypro(string proid) { bll.city bcity = new bll.city(); list<model.city> list = bcity.getlistmodel(father=' + proid + '); return list; } [webmethod] public list<model.area> getareabycity(string cityid) { bll.area barea = new bll.area(); list<model.area> list = barea.getlistmodel(father=' + cityid + '); return list; } } }
在三层的bll层中的city.cs和area.cs中分别添加以下属性
//city.cs： public list<model.city> getlistmodel(string strsql) { return dal.getlistmodel(strsql); } //area.cs： public list<model.area> getlistmodel(string strsql) { return dal.getlistmodel(strsql); }
在三层的dal层中的city.cs和area.cs中分别添加以下方法
//city.cs： public system.collections.generic.list<model.city> getlistmodel(string strsql) { system.collections.generic.list<model.city> list = new system.collections.generic.list<model.city>(); datatable dt = getlist(strsql).tables[0]; foreach (datarow row in dt.rows) { model.city mcity = new model.city(); mcity.id = convert.toint32(row[id]); mcity.cityid = row[cityid].tostring(); mcity.cityname = row[cityname].tostring(); list.add(mcity); } return list; } //area.cs： public system.collections.generic.list<model.area> getlistmodel(string strsql) { datatable dt = getlist(strsql).tables[0]; system.collections.generic.list<model.area> list = new system.collections.generic.list<model.area>(); foreach (datarow row in dt.rows) { model.area marea = new model.area() { id = convert.toint32(row[id]), areaid = row[areaid].tostring(), areaname = row[areaname].tostring() }; list.add(marea); } return list; }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
ajax实现显示页面后才加载
ajax怎么实现异步刷新和局部刷新
以上就是ajax不刷新的情况下省市县三级联动的详细内容。