Ajax实现省,市,县的三级联动

前端之家收集整理的这篇文章主要介绍了Ajax实现省,市,县的三级联动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>city.html</title> <Meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <Meta http-equiv="description" content="this is my page"> <Meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> /* [ {"id":110000,"leaf":false,"name":"北京市","parentId":0},{"id":120000,"name":"天津市",{"id":130000,"name":"河北省","parentId":0} ... ] */ // 不带缓存的实现 $(document).ready(function(){ $.post("/ajaxapp/city.do",{},function(json){ for(var i = 0; i < json.length; i++) { $("<option>").val(json[i].id).text(json[i].name).appendTo("#sheng"); } $("#sheng").change(); //主动触发change事件 },"json"); $("#sheng").change(function(){ $.post("/ajaxapp/city.do",{parentId:$(this).val()},function(json){ $("#shi").empty(); for(var i = 0; i < json.length; i++) { $("<option>").val(json[i].id).text(json[i].name).appendTo("#shi"); } $("#shi").change(); },"json"); }); $("#shi").change(function(){ $.post("/ajaxapp/city.do",function(json){ $("#xian").empty(); for(var i = 0; i < json.length; i++) { $("<option>").val(json[i].id).text(json[i].name).appendTo("#xian"); } },"json"); }); }); </script> </head> <body> <select id="sheng"></select> <select id="shi"></select> <select id="xian"></select> </body> </html> 原文链接:https://www.f2er.com/ajax/166579.html

猜你在找的Ajax相关文章