条件：wamp集成环境运行的情况下 结果示意： 文件目录：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省市县三级联动</title> <style> .container{ width: 600px; min-height: 300px; background-color:#FFEBCD; margin:auto auto; text-align: center; padding: 10px; color: #8B4513; } select{ border:1px solid #fff; width: 130px; height: 20px; color: #8B4513; font-weight: lighter; } label{ margin: 0 5px; } </style> <script type="text/javascript" src="js/jquery.js"> </script> <script> $(function(){ // 公用方法 function queryData(obj,callback){ $.ajax({ type:'get', url:'select.php', data:obj, dataType:'json', success:function(data){ callback(data); } }); } //加载省级数据 queryData({ flag:1 },function(data){ // console.log(data); var option = ''; $.each(data,function(i,e){ option +='<option value="'+e.id+'">'+e.province+'</option>'; }); $("#province").append(option); }); //市级数据请求 $('#province').change(function(){ //清除上次查询的残留数据，保留开始第一条 $("#city").find('option:gt(0)').remove(); $("#county").find('option:gt(0)').remove(); queryData({ flag:2, pId:$(this).val() },function(data){ // console.log(data); var option = ''; $.each(data,function(i,e){ option += '<option value="'+e.id+'">'+e.city+'</option>'; }); $("#city").append(option); }); }); //县级数据请求 $('#city').change(function(){ queryData({ flag:3, cId:$(this).val() },function(data){ // console.log(data); var option = ''; $.each(data,function(i,e){ option += '<option value="'+e.id+'">'+e.county+'</option>'; }); $("#county").append(option); }); }); }); </script> </head> <body> <div class="container"> <label> 省：<select id="province"> <option>请选择省 . . .</option> </select> </label> <label> 市：<select id="city"> <option>请选择市 . . .</option> </select> </label> <label> 县：<select id="county"> <option>请选择县 . . .</option> </select> </label> </div> </body> </html>