ajax巧妙实现省、市、县的三级联动
|
二级联动和三级联动的效果在web上很常见，在网上查了半天资料，写的都不是很清楚，无奈，自己写了个，使用php+ajax实现三级联动，以最常见的省市县三级联动为例！ 案例涉及到数据库，数据库设计如下： 首先创建一个test数据库，内容如下： CREATETABLEIFNOTEXISTS`province`( `province_id`int(2)NOTNULLAUTO_INCREMENT, `province_name`varchar(20)NOTNULL,255)">PRIMARYKEY(`province_id`) )ENGINE=InnoDBDEFAULTCHARSET=utf8AUTO_INCREMENT=3; INSERTINTO`province`(`province_id`,`province_name`)VALUES (1,'安徽'),255)">(2,'浙江'); CREATETABLEIFNOTEXISTS`city`( `city_id`int(4)NOTNULLAUTO_INCREMENT,255)">`city_name`varchar(20)NOTNULL,255)">`province_id`int(4)NOTNULL,255)">PRIMARYKEY(`city_id`) )ENGINE=InnoDBDEFAULTCHARSET=utf8AUTO_INCREMENT=5; INSERTINTO`city`(`city_id`,`city_name`,`province_id`)VALUES (3,'南京',2),255)">(4,'徐州',2); CREATETABLEIFNOTEXISTS`county`( `county_id`int(4)NOTNULLAUTO_INCREMENT,255)">`county_name`varchar(20)NOTNULL,255)">`city_id`int(4)NOTNULL,255)">PRIMARYKEY(`county_id`) INSERTINTO`county`(`county_id`,`county_name`,`city_id`)VALUES 对数据库说明：我创建了三张表，分别是省（province），市（city）,县（county）,插入了几条测试数据，当然你也可以设计一张表，效率当然没一张表好，所以不建议使用，看你个人习惯。 实现过程并不是很难，思路如下： 1)初始化所有的省份，这个可以直接从数据库中查询出来省份 创建select.php(代码简陋，只是实现功能而已，说明原理即可！)
1<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 2<html> 3<head> 4<title>三级联动(作者：mckee-www.phpddt.com)</title> 5<metahttp-equiv="content-type"content"text/html;charset=UTF-8"/> 6<script> 7functioncreateAjax(){ 8varxmlHttp=false; 9if(window.XMLHttpRequest){ 10xmlHttp=newXMLHttpRequest(); 11}elseifActiveXObject12try{ 13xmlHttp=new("Msxml2.XMLHTTP"); 14}catch(e){ 15try{ 16xmlHttp=newActiveXObject("Microsoft.XMLHTTP"); 17catche18xmlHttp=false; 19} 20} 2122returnxmlHttp; 23} 24 25varajaxnull; 26functiongetCity(province_id){ 27(); 28ajax.onreadystatechange=function(){ 29.readyState==430if(ajax.status==200){ 31citiesresponseXMLgetElementsByTagName"city"32$('city').length=0; 33myoptiondocumentcreateElement"option"34myoption.value=""; 35innerText"--请选择城市--"36$('city').appendChild(myoption); 37for(i=0;<length++){ 38varcity_id=cities[i].childNodes[0].childNodes[0].nodeValue; 39city_name[].childNodes[1nodeValue40varmyoption=document.createElement("option"); 41valuecity_id42myoption.innerText=city_name; 43$'city').appendChild44} 4546} 4748 49open"post","selectPro.php"true50ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 51send"province_id="+province_id52 5354 55getCounty56ajax=createAjax(); 57onreadystatechange=function58if(ajax.readyState==4){ 59status20060 61"county"62$('county').length=0; 6364myoption.value=""; 65"--请选择县--"66$('county').appendChild(myoption); 6768varcity_id=cities[i].childNodes[0].childNodes[0].nodeValue; 6970varmyoption=document.createElement("option"); 7172myoption.innerText=city_name; 73'county'74} 7576} 7778ajax.open("post","selectPro.php",true); 79setRequestHeader"Content-Type""application/x-www-form-urlencoded"80ajax.send("city_id="+city_id); 8182 83id84returndocument.getElementById(id); 8586 87</script> 88</head> 89<body> 90<formname="location"> 91<selectname"province"onchange"getCitythis)"> 92<optionvalue="">--请选择省份--</option> 93<?php 94$conn=mysql_connect("localhost","root",""); 95mysql_select_db"test"96mysql_query("setnamesutf8"); 97$sql"select*fromprovince" 98$result=mysql_query($sql); 99while$resmysql_fetch_assoc$result)){100?> 101<optionvalue="phpecho$res['province_id'];?>">'province_name']?></option>102<?php 103}104?> 105</select> 106 107"city"onChange108<optionvalue="">--请选择城市--</option> 109110 111"county""county"112<optionvalue="">--请选择县--</option> 113114</form> 115</body> 116</html>
selectPro.php页面：
117118//禁止缓存(www.phpddt.com原创) 119header"Content-type:text/xml;charset=utf-8"120header("Cache-Control:no-cache"); 121//数据库连接 122$conn=mysql_connect("localhost",255)">123124mysql_query("setnamesutf8"); 125 126if(!empty($_POST['province_id'])){ 127 128$province_id=$_POST['province_id']; 129"select*fromcitywhereprovince_id={$province_id}"130$query=mysql_query($sql); 131$info"<province>"132while($res=mysql_fetch_assoc($query)){ 133.="<city>"134$info.="<city_id>".$res['city_id']."</city_id>"; 135"<city_name>"'city_name']."</city_name>"136$info.="</city>"; 137138$info.="</province>"; 139echo$info140} 141 142if(!empty($_POST['city_id'])){ 143 144$city_id=$_POST['city_id']; 145"select*fromcountywherecity_id={$city_id}"146$query=mysql_query($sql); 147148while($res=mysql_fetch_assoc($query)){ 149"<county>"150$info.="<county_id>".$res['county_id']."</county_id>"; 151"<county_name>"'county_name'"</county_name>"152$info.="</county>"; 153154$info.="</city>"; 155156} 157?>
界面如下：
本代码在IE测试正常，欢迎大家提出建议和批评！ 欢迎转载！原文地址:http://www.phpddt.com/php/769.html，转载请注明地址，谢谢！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |