社区 学习 工具库 休闲
搜索
简体中文
首页 > 后端开发 > php教程 > 关于php+mysql+ajax省市区三级联动菜单，求帮助啊

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

WBOY
发布： 2016-06-23 13:53:30
原创
954 人浏览过

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


回复讨论(解决方案)

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

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

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

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


谢了，真的没有积分了。894563420@qq.com

http://blog.csdn.net/sangliu/article/details/8674886
http://blog.csdn.net/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.csdn.net/sangliu/article/details/8674886
http://blog.csdn.net/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">        <select id="loc_province" name="sheng" style="width: 80px;"></select>        <select id="loc_city" name="shi" style="width:100px;"></select>        <select id="loc_town" name="qu" style="width:120px;"></select>        <input type="hidden" name="location_id" />        </div>
登录后复制
这个是html页面。
area.js 
function showLocation(province , city , town) {		var loc	= new Location();	var title	= ['省份' , '地级市' , '市、县、区'];	$.each(title , function(k , v) {		title[k]	= '<option value="">'+v+'</option>';	})		$('#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	= '<option value="'+k+'">'+v+'</option>';			el.append(option);						if (k == selected_id) {				selected_index	= index;			}						index++;		})		el.attr('selectedIndex' , selected_index);	}}
登录后复制

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

谁知道的发到我邮箱里面来谢啦2969978505@qq.com

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,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>
登录后复制
这是html里的js代码 
 <td width="120">城市</td>        <td width="300">        <select id="province" onChange="getCities();" name="province">	<option value="">---省---</option>	<?php		require_once(CP_PATH.'ext/process.php'); 		getProvince();	?>     </select>     <select id="city" onChange="getArea();" name="city">	 <option value="">---城市---</option>     </select>     <select id="area" name="area">	 <option value="">---县城---</option>     </select>
登录后复制

原生 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('<option value=\"', id, '\">', 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部分 
<select id="sheng"><option value="">---省---</option></select><select id="shi"><option value="">---市---</option></select><select id="xian"><option value="">---县---</option></select>
登录后复制
登录后复制

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('<option value=\"', id, '\">', 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部分 
<select id="sheng"><option value="">---省---</option></select><select id="shi"><option value="">---市---</option></select><select id="xian"><option value="">---县---</option></select>
登录后复制
登录后复制

那个加载jquery是不是在页头加一个啊

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

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

再问你个事情呗，就是我把你给的三段代码都放在了html里面，然后也面上放php代码的地放就把省里面的所有数据都循环出来了， 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />{$css}{$js}<!--<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></head><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('<option value=\"', code, '\">', name,  '</optipn') from $tbla where $wherea";$rsa = mysql_query($sql);while(list($r) = mysql_fetch_row($rsa)) $row[] = $r;echo join('', $row);?><div class="page_function">  <div class="info">    <h3>帮帮{$action_name}</h3>  </div></div><div class="page_form"><form action="__URL__/{$action}_save/time-<?php echo time(); ?>-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" <!--if:{$info['familyOrShop']==1}--> checked="checked" <!--{/if}--> />       家庭       <input name="familyOrShop" type="radio" value="0" <!--if:{$info['familyOrShop']==0}--> checked="checked" <!--{/if}--> />        店铺 </td>        </tr>            <tr>        <td width="120">价格</td>        <td width="300">        <input name="price" type="text" class="text_value" id="price" value="{$info.price}" reg="(-?\d*)\.?\d+" msg="请输入正确的价格" />        </td>      </tr>       <tr>        <td width="120">姓名</td>        <td width="300">        <input name="name" type="text" class="text_value" id="name" value="{$info.name}" reg="\S" msg="姓名不能为空" />        </td>      </tr>       <tr>        <td width="120">内容</td>        <td width="300">        <input name="content" type="text" class="text_value" id="content" value="{$info.content}" reg="\S" msg="内容不能为空" />        </td>      </tr><tr>        <td width="120">联系方式</td>        <td width="300">        <input name="telephone" type="text" class="text_value" id="telephone" reg="(^(\d{3,4}-)?\d{7,8})$|(13[0-9]{9})" msg='请输入正确的电话号码' value="{$info.telephone}" />        </td>      </tr>       <tr>        <td width="120">城市</td>        <td width="300">        <!--<select id="province" onChange="getCities();" name="province">	<option value="">---省---</option>	<?php		require_once(CP_PATH.'ext/process.php'); 		getProvince();	?>     </select>     <select id="city" onChange="getArea();" name="city">	 <option value="">---城市---</option>     </select>     <select id="area" name="area">	 <option value="">---县城---</option>     </select> -->     <select id="sheng">			<option value="">---省---</option>		</select> <select id="shi">			<option value="">---市---</option>		</select> <select id="xian">			<option value="">---县---</option>		</select>     </td>        </tr> 		    </table><div class="form_submit"><input name="id" type="hidden" value="{$info.id}" /><button type="submit" class="button">保存</button> </div></form></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></body>
登录后复制
我看php的代码最后把数据echo了一下，所以页面上会出现省的数据。但是怎么给她放到下拉菜单里面的。还有我这个网站使用cms做的，是不是就不用加载jquery了。


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


谢了，真的没有积分了。894563420@qq.com
给你一个实际在线的例子吧 www.35dalu.com/info/fabu 看看里面有2个省市区 三级联动。


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


谢了，真的没有积分了。894563420@qq.com 啥也不说了，分都给你了

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

相关标签：
省市区 联动 菜单
来源：php.cn
上一篇：php如何格式化oracle的date类型数据 下一篇：php中计算结果是0，为什么会显示为 3.5527136788005E-15
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
匹配单词的正则表达式 我有一个脚本，我试图将新的职位名称与数据库中的现有职位名称进行匹配。SELECTa.titleASJobTitle,j.DescriptionASMatchedJobTitle,f...
来自于 2024-04-06 21:24:04
0
1
606
解决CSS中页面底部神秘空白的方法 我正在尝试使用Bootstrap和D3构建一个简单的网页，但我不知道如何消除底部的所有空白。我想摆脱它。我尝试将body和html的min-height设置为100%，但没有任何作...
来自于 2024-04-06 20:22:15
0
1
454
使用opentbs生成odt文件时遇到的问题：相同key的值显示在同一行而不是单独的列中。 我正在使用一个名为OpenTbs的库来使用PHP创建odt，我使用它是因为动态生成列和行。我知道如何创建行和列，但我不知道如何组织它们。让我添加一个例子：所以首先我会将其添加到我的...
来自于 2024-04-06 20:18:18
0
1
483
使用MySQL SQL查询计算另一张表中字段的总和 我有一个这样的模式：具有属性“user_id”和“username”的用户表以及具有属性“customer_id”（user_id的FK）和“finalPrice”的订单表数据库架...
来自于 2024-04-06 19:39:29
0
1
441
在移动视图中，当用户点击链接时，如何关闭此导航栏？ 当用户点击链接浏览网站时，导航栏没有关闭？我曾尝试向每个链接添加单击事件侦听器以关闭导航栏，但它不起作用！此外，处于活动位置（即X）的hamberberger菜单图标也没有很好地对...
来自于 2024-04-06 19:23:03
0
1
411
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板