<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省、市、县三级联动</title> </head> <body> <div id="box"> <select name="province" id="province"> <option value="">请选择</option> </select> <select name="stadt"> <option value="">请选择</option> </select> <select name="county"> <option value="">请选择</option> </select> </div> </body> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ //省级获取 // $.get("http://area.shen-xin.cc/index2.php",{Id:0},function(data){ // var sheng="<option value=''>请选择</option>"; // $.each(data.info,function(i,value){ // sheng+='<option value='+value.codeid+'>'+value.cityName+'</option>'; // }); // $("select[name='province']").html(sheng); // },'JSONP'); //JSONP用于跨域 $.getJSON 也能自动实现跨域 var url="http://area.shen-xin.cc/index2.php?callback=?"; function callback(){ var cb = context.Request["callback"]; context.Response.Write(cb + "(" + json + ")"); } // callback函数可以省略 $.getJSON(url,{Id:0},function(data){ var sheng="<option value=''>请选择</option>"; $.each(data.info,function(i,value){ sheng+='<option value='+value.codeid+'>'+value.cityName+'</option>'; }); $("select[name='province']").html(sheng); }); $("select[name='province']").change(function(){ $("select[name='county']").html("<option value=''>请选择</option>"); var shid=$(this).val(); if(shid===''){ $("select[name='stadt']").html("<option value=''>请选择</option>"); return false; }; var shi="<option value=''>请选择</option>"; $.get("http://area.shen-xin.cc/index2.php",{Id:shid},function(data){ $.each(data.info,function(i,value){ shi+='<option value='+value.codeid+'>'+value.cityName+'</option>' }); $("select[name='stadt']").html(shi); },'JSONP') }); $("select[name='stadt']").change(function(){ var xianid=$(this).val(); if(xianid===''){ $("select[name='county']").html("<option value=''>请选择</option>"); return false; }; var xian=""; $.get("http://area.shen-xin.cc/index2.php",{Id:xianid},function(data){ $.each(data.info,function(i,value){ xian+='<option value='+value.codeid+'>'+value.cityName+'</option>' }); $("select[name='county']").html(xian); },'JSONP') }); //市级获取 }) </script> </html>