关于php+mysql+ajax省市区三级联动菜单，求帮助啊

文章目录[隐藏]

回复讨论(解决方案)

哎，我又来了。这次是关于省市区三级联动菜单的问题。我在网上找了很多这样的代码，但是大部分都是把数据放到js里面的。老板说不行，要连接数据库的，然后我又在CSDN论坛上找了一个带数据库的。但是不好用啊，后面老板给了我数据库，是三个表，省市区各占一个，省市区个有一个id，市和区有父id，市的父id就是省的ID，区的父id就是市id。然后用ajax作出三级联动的效果，他说这样简单，可是我不会ajax啊。不知道大神可不可以帮帮忙啊。昨天就因为这个是加班到8点多啊，大学毕业以来第一次加班到这么晚啊……这个本是昨天的活，今天还有今天的活，不能再拖啊了啊。拜托了。

回复讨论(解决方案)

http://blog.gaodaima.com/sangliu/article/details/8674886
http://blog.gaodaima.com/ykm0722/article/details/6064559
http://www.cnblogs.com/freespider/archive/2010/08/30/1812669.html

别人讲N遍，不如自己动手做一遍。

http://download.gaodaima.com/detail/jam00/5079966
或者留个邮箱直接发给你

谢了，真的没有积分了。[email protected]

http://blog.gaodaima.com/sangliu/article/details/8674886
http://blog.gaodaima.com/ykm0722/article/details/6064559
http://www.cnblogs.com/freespider/archive/2010/08/30/1812669.html

别人讲N遍，不如自己动手做一遍。

额，我在网上找了一个纯js的，把他放在静态页面就还用。但是放到我的项目里面就不好用了。不显示数据。用火狐调试显示还有 ,area.js,location.js这两个文件每个里面都声明了一个函数function showLocation(province , city , town)和

function Location()

我在百度上查说

$(document).ready(function() {

的意思是：“页面加载成功后，页面内的所有链接在“点击”事件的时候，都加载那个函数”我的项目是在cms基础上进行二次开发，是不是和原有的js冲突了。本人js小白，求指导…..

http://blog.gaodaima.com/sangliu/article/details/8674886
http://blog.gaodaima.com/ykm0722/article/details/6064559
http://www.cnblogs.com/freespider/archive/2010/08/30/1812669.html

别人讲N遍，不如自己动手做一遍。

        <script language="JavaScript" src="area.js"></script>		<script language="JavaScript" src="location.js"></script>		<div class="main">                                        </div>

这个是html页面。
area.js

function showLocation(province , city , town) {		var loc	= new Location();	var title	= ['省份' , '地级市' , '市、县、区'];	$.each(title , function(k , v) {		title[k]	= ''+v+'';	})		$('#loc_province').append(title[0]);	$('#loc_city').append(title[1]);	$('#loc_town').append(title[2]);			$('#loc_province').change(function() {		$('#loc_city').empty();		$('#loc_city').append(title[1]);		loc.fillOption('loc_city' , '0,'+$('#loc_province').val());		$('#loc_town').empty();		$('#loc_town').append(title[2]);		//$('input[@name=location_id]').val($(this).val());	})		$('#loc_city').change(function() {		$('#loc_town').empty();		$('#loc_town').append(title[2]);		loc.fillOption('loc_town' , '0,' + $('#loc_province').val() + ',' + $('#loc_city').val());		//$('input[@name=location_id]').val($(this).val());	})		$('#loc_town').change(function() {		$('input[@name=location_id]').val($(this).val());	})		if (province) {		loc.fillOption('loc_province' , '0' , province);				if (city) {			loc.fillOption('loc_city' , '0,'+province , city);						if (town) {				loc.fillOption('loc_town' , '0,'+province+','+city , town);			}		}			} else {		loc.fillOption('loc_province' , '0');	}		}

location.js

function Location() {	this.items	= {	'0':{1:'北京市',22:'天津市',44:'上海市',66:'重庆市',108:'河北省',406:'山西省',622:'内蒙古',804:'辽宁省',945:'吉林省',1036:'黑龙江省',1226:'江苏省',1371:'浙江省',1500:'安徽省',1679:'福建省',1812:'江西省',1992:'山东省',2197:'河南省',2456:'湖北省',2613:'湖南省',2822:'广东省',3015:'广西',3201:'海南省',3235:'四川省',3561:'贵州省',3728:'云南省',3983:'西藏',4136:'陕西省',4334:'甘肃省',4499:'青海省',4588:'宁夏',4624:'新疆',4802:'香港',4822:'澳门',4825:'台湾省'},	'0,1':{2:'北京市'},.............};}Location.prototype.find	= function(id) {	if(typeof(this.items[id]) == "undefined")		return false;	return this.items[id];}Location.prototype.fillOption	= function(el_id , loc_id , selected_id) {	var el	= $('#'+el_id);		var json	= this.find(loc_id);		if (json) {		var index	= 1;		var selected_index	= 0;		$.each(json , function(k , v) {			var option	= ''+v+'';			el.append(option);						if (k == selected_id) {				selected_index	= index;			}						index++;		})		el.attr('selectedIndex' , selected_index);	}}

怎么都来不起啊，用数据库的怎么操作的谁知道啊？

谁知道的发到我邮箱里面来谢啦[email protected]

http://blog.sina.com.cn/s/blog_49ea36420100t1ji.html

这个例子你看看js，服务端你可以写原生php代码查询。
有不懂的问题，再贴出来吧

http://www.helloweba.com/view-blog-188.html
http://www.helloweba.com/demo/cityselect/

这个是用js实现，效果来的快。

http://blog.sina.com.cn/s/blog_49ea36420100t1ji.html

这个例子你看看js，服务端你可以写原生php代码查询。
有不懂的问题，再贴出来吧

我用上面那个老兄邮箱发给我的代码，出现的问题是查询出来的省的数据都是“？？？”但是数据库编码是UTF8，我php的编码也是UTF8，不知道为啥会出现这种问题。还有就是我代码放到我的项目里，就只有省里面会有数据，但是市和区里面都查询不到数据，不知道为啥，

原生 js 代码不超过 20 行
用 jquery 不超过 4 行，如果数据结构设计的好，一行也就可以了

php 部分不算数据库连接，也就 3、4 行代码吧

不至于搞得那么复杂吧？一天了。还没头绪

http://blog.sina.com.cn/s/blog_49ea36420100t1ji.html

这个例子你看看js，服务端你可以写原生php代码查询。
有不懂的问题，再贴出来吧

如果放在一个页面里可查询到数据，不过全是？放到我的项目里就只能查到省的数据 .

script type="text/javascript">//创建AJAX 引擎function getXmlHttpObject(){	var XmlHttpRequest;	if(ActiveXObject){		//ie		XmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");	}else{		//火狐，opera		XmlHttpRequest=new XMLHttpRequest();	}	return XmlHttpRequest;}var myXmlHttpRequest="";//根据省级信息获取城市function getCities(){	myXmlHttpRequest=getXmlHttpObject();	if(myXmlHttpRequest){		var url="showCitiesPro.php";//post方式		var data="type=city&province="+$('province').value;		myXmlHttpRequest.open("post",url,true);//异步		myXmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");		//指定回调函数		myXmlHttpRequest.onreadystatechange=chuliCity;		//发送		myXmlHttpRequest.send(data);	}}function chuliCity(){	if(myXmlHttpRequest.readyState==4){		//status==200 才是真正的成功		if(myXmlHttpRequest.status==200){			//取出服务器回送的数据			var cities=myXmlHttpRequest.responseXML.getElementsByTagName("name");			var codes=myXmlHttpRequest.responseXML.getElementsByTagName("code");			//每次执行都将id为city的select长度清零			$('city').length=0;			var myOption=document.createElement("option");			myOption.innerText="---城市---";			$('city').appendChild(myOption);			//遍历并取出城市			for(var i=0;i<cities.length;i++){				var city_name=cities[i].childNodes[0].nodeValue;				var city_code=codes[i].childNodes[0].nodeValue;				//创建新的元素option				var myOption=document.createElement("option");				myOption.value=city_code;				//赋文本				myOption.innerText=city_name;				//添加到 id为city的select里				$('city').appendChild(myOption);			}		}	}}//根据市级获取县级function getArea(){	myXmlHttpRequest=getXmlHttpObject();	if(myXmlHttpRequest){		var url="showCitiesPro.php";//post方式		var data="type=area&city="+$('city').value;		myXmlHttpRequest.open("post",url,tr<i>1本文来#源gaodai$ma#com搞$代*码*网</i><pre>搞代gaodaima码

ue);//异步 myXmlHttpRequest.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”); //指定回调函数 myXmlHttpRequest.onreadystatechange=chuliArea; //发送 myXmlHttpRequest.send(data); }}function chuliArea(){ if(myXmlHttpRequest.readyState==4){ //status==200 才是真正的成功 if(myXmlHttpRequest.status==200){ //取出服务器回送的数据 var cities=myXmlHttpRequest.responseXML.getElementsByTagName(“name”); var codes=myXmlHttpRequest.responseXML.getElementsByTagName(“code”); //每次执行都将id为city的select长度清零 $(‘area’).length=0; var myOption=document.createElement(“option”); myOption.innerText=”—县城—“; $(‘area’).appendChild(myOption); //遍历并取出城市 for(var i=0;i<cities.length;i++){ var city_name=cities[i].childNodes[0].nodeValue; var city_code=codes[i].childNodes[0].nodeValue; //创建新的元素option var myOption=document.createElement("option"); myOption.value=city_code; //赋文本 myOption.innerText=city_name; //添加到 id为area的select里 $('area').appendChild(myOption); } } }}//获取对象的函数function $(id){ return document.getElementById(id);}</script>这是html里的js代码

 <td width="120">城市</td>        <td width="300">        	---省---	<?php		require_once(CP_PATH.'ext/process.php'); 		getProvince();	?>          	 ---城市---          	 ---县城---

原生 js 代码不超过 20 行
用 jquery 不超过 4 行，如果数据结构设计的好，一行也就可以了

php 部分不算数据库连接，也就 3、4 行代码吧

不至于搞得那么复杂吧？一天了。还没头绪

哎，主要是js的一点都不会啊，php也是半吊子。求大神给个js代码被，网上弄的都是一放到我的项目里就不好用了。关于php的给我个思路我自己弄也可以啊。我的数据库的结构就是省市区分三个表，每个表都有一个id，一个名字。市和区各有一个父id，市的父id就是省的id，区的父id就是市的id

php 部分

//连接mysql并选择库switch($_POST['type']) {  case 'shi':     $tbl = '市表';     $where = "pid='$_POST[id]'";     break;  case 'xian':     $tbl = '县表';     $where = "pid='$_POST[id]'";     break;  default:     $tbl = '省表';     $where = "1";}$sql = "select concat('', name,  '</optipn') from $tbl where $where";$rs = mysql_query($sql);while(list($r) = mysql_fetch_row($rs)) $row[] = $r;echo join('', $row);

js 部分需加载 jquery

$(function() {  $('#sheng').change(function() {     $('#shi').load(url, {type:'shi', id:$(this.val()});  });  $('#shi').change(function() {     $('#xian').load(url, {type:'xian', id:$(this.val()});  });  $('#sheng').load(url, {type:sheng'});});

HTML部分

---省------市------县---

php 部分

//连接mysql并选择库switch($_POST['type']) {  case 'shi':     $tbl = '市表';     $where = "pid='$_POST[id]'";     break;  case 'xian':     $tbl = '县表';     $where = "pid='$_POST[id]'";     break;  default:     $tbl = '省表';     $where = "1";}$sql = "select concat('', name,  '</optipn') from $tbl where $where";$rs = mysql_query($sql);while(list($r) = mysql_fetch_row($rs)) $row[] = $r;echo join('', $row);

js 部分需加载 jquery

$(function() {  $('#sheng').change(function() {     $('#shi').load(url, {type:'shi', id:$(this.val()});  });  $('#shi').change(function() {     $('#xian').load(url, {type:'xian', id:$(this.val()});  });  $('#sheng').load(url, {type:sheng'});});

HTML部分

---省------市------县---

那个加载jquery是不是在页头加一个<script type=”text/javascript” src=”jquery.js”></script>啊

是的，当然你要有，且路径正确

再问你个事情呗，就是我把你给的三段代码都放在了html里面，然后也面上放php代码的地放就把省里面的所有数据都循环出来了，

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />{$css}{$js}<!---ecms -ecms -ecms <script type="text/javascript">//创建AJAX 引擎function getXmlHttpObject(){	var XmlHttpRequest;		//火狐，opera		XmlHttpRequest=new XMLHttpRequest();	return XmlHttpRequest;}var myXmlHttpRequest="";//根据省级信息获取城市function getCities(){	myXmlHttpRequest=getXmlHttpObject();	if(myXmlHttpRequest){		var url="__PUBLIC__/showCitiesPro.php";//post方式		var data="type=city&province="+$('province').value;		myXmlHttpRequest.open("post",url,true);//异步		myXmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");		//指定回调函数		myXmlHttpRequest.onreadystatechange=chuliCity;		//发送		myXmlHttpRequest.send(data);	}}function chuliCity(){	if(myXmlHttpRequest.readyState==4){		//status==200 才是真正的成功		if(myXmlHttpRequest.status==200){			//取出服务器回送的数据			var cities=myXmlHttpRequest.responseXML.getElementsByTagName("name");			var codes=myXmlHttpRequest.responseXML.getElementsByTagName("code");			//每次执行都将id为city的select长度清零			$('city').length=0;			var myOption=document.createElement("option");			myOption.innerText="-城市-";			$('city').appendChild(myOption);			//遍历并取出城市			for(var i=0;i<cities.length;i++){				var city_name=cities[i].childNodes[0].nodeValue;				var city_code=codes[i].childNodes[0].nodeValue;				//创建新的元素option				var myOption=document.createElement("option");				myOption.value=city_code;				//赋文本				myOption.innerText=city_name;				//添加到 id为city的select里				$('city').appendChild(myOption);			}		}	}}//根据市级获取县级function getArea(){	myXmlHttpRequest=getXmlHttpObject();	if(myXmlHttpRequest){		var url="showCitiesPro.php";//post方式		var data="type=area&city="+$('city').value;		myXmlHttpRequest.open("post",url,true);//异步		myXmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");		//指定回调函数		myXmlHttpRequest.onreadystatechange=chuliArea;		//发送		myXmlHttpRequest.send(data);	}}function chuliArea(){	if(myXmlHttpRequest.readyState==4){		//status==200 才是真正的成功		if(myXmlHttpRequest.status==200){			//取出服务器回送的数据			var cities=myXmlHttpRequest.responseXML.getElementsByTagName("name");			var codes=myXmlHttpRequest.responseXML.getElementsByTagName("code");			//每次执行都将id为city的select长度清零			$('area').length=0;			var myOption=document.createElement("option");			myOption.innerText="-县城-";			$('area').appendChild(myOption);			//遍历并取出城市			for(var i=0;i<cities.length;i++){				var city_name=cities[i].childNodes[0].nodeValue;				var city_code=codes[i].childNodes[0].nodeValue;				//创建新的元素option				var myOption=document.createElement("option");				myOption.value=city_code;				//赋文本				myOption.innerText=city_name;				//添加到 id为area的select里				$('area').appendChild(myOption);			}		}	}}//获取对象的函数function $(id){	return document.getElementById(id);}</script>--><script type="text/javascript">$(function() {	  $('#sheng').change(function() {	     $('#shi').load(url, {type:'shi', id:$(this.val()});	  });	  $('#shi').change(function() {	     $('#xian').load(url, {type:'xian', id:$(this.val()});	  });	 	  $('#sheng').load(url, {type:sheng'});	});</script><body><?php//连接mysql并选择库switch($_POST['type']) {  case 'shi':     $tbla = 'city';     $wherea = "provincecode='$_POST[code]'";     break;  case 'xian':     $tbla = 'area';     $wherea = "citycode='$_POST[code]'";     break;  default:     $tbla = 'province';     $wherea = "1";}$sql = "select concat('', name,  '<div class="page_function">  <div class="info">    <h3>帮帮{$action_name}</h3>  </div></div><div class="page_form">-ajax-true" method="post" id="form"><div class="page_table form_table">    <table width="100%" border="0" cellspacing="0" cellpadding="0">         <tr>     <?php if(!isset($info['familyOrShop'])){ $info['familyOrShop']=1; } ?>     <input name="familyOrShop" type="radio" value="1" <!---ecms -ecms -ecms if:{$info['familyOrShop']==1}--> checked="checked" <!---ecms -ecms -ecms {/if}--> />       家庭       <input name="familyOrShop" type="radio" value="0" <!---ecms -ecms -ecms if:{$info['familyOrShop']==0}--> checked="checked" <!---ecms -ecms -ecms {/if}--> />        店铺 </td>        </tr>            <tr>        <td width="120">价格</td>        <td width="300">                </td>      </tr>       <tr>        <td width="120">姓名</td>        <td width="300">                </td>      </tr>       <tr>        <td width="120">内容</td>        <td width="300">                </td>      </tr><tr>        <td width="120">联系方式</td>        <td width="300">                </td>      </tr>       <tr>        <td width="120">城市</td>        <td width="300">        <!---ecms -ecms -ecms 	---省---	<?php		require_once(CP_PATH.'ext/process.php'); 		getProvince();	?>          	 ---城市---          	 ---县城---      -->     			---省---		 			---市---		 			---县---		     </td>        </tr> 		    </table><div class="form_submit"><button type="submit" class="button">保存</button> </div></div><script type="text/javascript">function checkForm(){	if(!document.getElementById || !document.createTextNode) return false;	var utel=document.getElementById("utel");	var str=utel.value;	var errors=document.getElementById("myError");	var regPartton=/1[3-8]+\d{9}/;	if(!str || str==null){		erros.innerHTML="手机号码不能为空！";		utel.focus();		return false;	}else if(!regPartton.test(str)){		errors.innerHTML="手机号码格式不正确！";		utel.focus();		return false;	}else{		errors.innerHTML.nodeValue="";		return true;	}}</script>

我看php的代码最后把数据echo了一下，所以页面上会出现省的数据。但是怎么给她放到下拉菜单里面的。还有我这个网站使用cms做的，是不是就不用加载jquery了。

http://download.gaodaima.com/detail/jam00/5079966
或者留个邮箱直接发给你

谢了，真的没有积分了。[email protected]

给你一个实际在线的例子吧 http://www.35dalu.com/info/fabu 看看里面有2个省市区三级联动。

http://download.gaodaima.com/detail/jam00/5079966
或者留个邮箱直接发给你

谢了，真的没有积分了。[email protected]

啥也不说了，分都给你了

谢谢大家的指导了，但是jam00这位仁兄在QQ邮箱上不厌其烦的指导，终于让我弄出来了，所以只有把分给他了

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：关于php+mysql+ajax省市区三级联动菜单，求帮助啊

回复讨论(解决方案)

Hi，您需要填写昵称和邮箱！