这篇文章主要介绍“ajax如何实现无刷新省市县三级联动”，在日常操作中，相信很多人在ajax如何实现无刷新省市县三级联动问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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>郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
