suchen

Heim >Backend-Entwicklung >PHP-Tutorial >关于php+mysql+ajax省市区三级联动菜单，求帮助啊

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

WBOY
WBOYOriginal
2016-06-23 13:53:30938Durchsuche

哎，我又来了。这次是关于省市区三级联动菜单的问题。我在网上找了很多这样的代码，但是大部分都是把数据放到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是不是在页头加一个<script></script>啊

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

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

再问你个事情呗，就是我把你给的三段代码都放在了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邮箱上不厌其烦的指导，终于让我弄出来了，所以只有把分给他了

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：php如何格式化oracle的date类型数据Nächster Artikel：php中计算结果是0，为什么会显示为 3.5527136788005E-15

In Verbindung stehende Artikel

Mehr sehen