连接数据库：db.php
<?php$dbhost="localhost";$dbpassword="123";$dbuser ='root';//数据库用户名$dbname = 'center';//数据库名$dbcharset = 'gbk';//数据库编码,不建议修改
mysql_connect($dbhost,$dbuser,$dbpassword);mysql_query("set names $dbcharset");mysql_select_db($dbname);serror_reporting(E_ALL);?>
显示页面：city.php
<?phprequire 'db.php';?><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript" src="getcity.js"></script><script type="text/javascript" src="getnews.js"></script><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>配送范围、资费</title>
</head><body>
<H2 style="font-size: 24px;">配送方式</H2>
<P><H3 style="font-size:16px;">配送范围、资费及配送时间</H3>
<ul style="width:1024px; list-style-type:none;"> <li style="float:left;"> <span style="font-size:14px"> 省/直辖市（必选）：</span><select name="areaProvince" id="areaProvince" onChange="queryCity(this)" > <option value="" selected="selected" >请选择省份</option> <?php $rs=mysql_query("select * from province;"); ?> <? while($row=mysql_fetch_array($rs)){ ?> <option value="<?=$row['provinceID'];?>" ><?=$row['province'];?></option> <? };?> </select>
</li> <li style="float:left;"> <span id="shi" style="display:none;"> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="font-size:14px">市/地区（必选）：</td> <td><select id="areaCity" name="city" onChange="queryCountry(this)" style="display:none" > <option value="" selected="selected" >请选择市/地区</option> </select></td> </tr> </tbody> </table> </span> </li> <li style="float:left;"> <span id="xian" style="display:none; float:left;"> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="font-size:14px">县/地区（必选）：</td> <td><select id="areaCountry" name="area" οnchange="showUser(this.value)" style="display:none" > <option value="" selected="selected">请选择县/地区</option> </select></td> </tr> </tbody> </table> </span> </li> </ul>
<br/> <ul style=" list-style:none; font-family:'宋体'; width:1024px; " > <li id="txtHint" style="font-size:16px"> </li>
</ul>
</body></html>
省市县三级联动：
php部分 getcity.php
<?php require 'db.php';
function getCity($fatherid){ if($fatherid) { $citys=array(); $rs=mysql_query("select * from city where father=$fatherid;"); while($row=mysql_fetch_array($rs)) { $citys[]=array('cityid'=>$row['cityID'],'city'=>iconv('GBK','UTF-8',$row['city'])); } echo json_encode($citys); } }
function getArea($fatherid){ if($fatherid) { $areas=array(); $rs=mysql_query("select * from area where father=$fatherid;"); while($row=mysql_fetch_array($rs)) { $areas[]=array('areaid'=>$row['areaID'],'area'=>iconv('GBK','UTF-8',$row['area'])); } echo json_encode($areas); } } if(isset($_REQUEST['action'])&&$_REQUEST['action']!='') { switch ($_REQUEST['action']) { case 'city': if(isset($_REQUEST['id'])&&$_REQUEST['id']!='') getCity($_REQUEST['id']); break; case 'area': if(isset($_REQUEST['id'])&&$_REQUEST['id']!='') getArea($_REQUEST['id']); break; } } ?>
AJAX部分 getcity.js
// JavaScript Documentvar xmlHttp;function clsopt(opt){ if(opt) { //清除县/区列表内容并设置为默认值 var length=opt.length; for(var i=length-1;i>0;i--) { opt.remove(i); } }}function valid(opt){ if(opt.options[opt.selectedIndex].value=='') { alert('请选择县/区'); return false; } }function createXMLHttpRequest(){ var xmlhttp; if (window.XMLHttpRequest) {// code for all new browsers xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) {// code for IE5 and IE6 var aVersions = ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP']; for(var i=0; i<aVersions.length; i++) xmlhttp = new ActiveXObject(aVersions[i]); } if (xmlhttp!=null) { return xmlhttp; } else { alert("你的浏览器不支持 XMLHTTP."); }}
function queryCity(opt){ document.getElementById("shi").style.display = "block"; document.getElementById("areaCity").style.display = "block"; id=opt.options[opt.selectedIndex].value; if(id=='') { alert('请选择省'); clsopt(document.getElementById("areaCity")); clsopt(document.getElementById("areaCountry")); return false; } xmlHttp=createXMLHttpRequest(); type="city"; var url="getcity.php?action=city&id="+id; xmlHttp.onreadystatechange=statechange; xmlHttp.open("GET",url,true); xmlHttp.send('');}
function queryCountry(opt){ document.getElementById("xian").style.display = "block"; document.getElementById("areaCountry").style.display = "block"; id=opt.options[opt.selectedIndex].value; if(id=='') { alert('请选择市/区'); clsopt(document.getElementById("areaCountry")); return false; } xmlHttp=createXMLHttpRequest(); type="country"; var url="getcity.php?action=area&id="+id; xmlHttp.onreadystatechange=statechange; xmlHttp.open("GET",url,true); xmlHttp.send('');
} function statechange(){ if(xmlHttp.readyState==4&&xmlHttp.status==200) { if(type=="city") { showCity(); } else if(type="country") { showCountry(); } }} function showCity(){ var cityopt=document.getElementById("areaCity"); var citys=eval('('+xmlHttp.responseText+')'); //cityopt.innerHTML=""; //刷新市/区列表内容并设置为默认值 clsopt(cityopt);
var str=""; for(i in citys) { cityopt.options.add(new Option(citys[i].city,citys[i].cityid)); str+=citys[i].city; } clsopt(document.getElementById("areaCountry"));
}function showCountry(){ var areaopt=document.getElementById("areaCountry"); //刷新县/区列表内容并设置为默认值 clsopt(areaopt);
var areas=eval('('+xmlHttp.responseText+')'); for(i in areas) { areaopt.options.add(new Option(areas[i].area,areas[i].areaid)); }}-->
获得地区的运费信息:
php部分 getnews.php
<? $q=$_GET["q"]; $con=mysql_connect('localhost', 'root', '123'); mysql_query("set names 'utf8'"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("center", $con); $sql="SELECT * FROM `info` WHERE fatherID=$q "; $result = mysql_query($sql); echo " <table border=0 cellpadding=2 cellspacing=1 bgcolor='#B6B3AB' style='text-align:center'> <tr bgcolor='#b1c8d6' > <th>送货方式</th> <th>配送范围</th> <th>配送费</th> <th>商品出库后配送时限 </th> </tr>"; while($row = mysql_fetch_array($result)) { echo "<tr bgcolor='#ffffff' >"; //echo "<td>" . $row['storehouse'] . "</td>"; echo "<td>" . $row['method_1'] . "</td>"; echo "<td>" . $row['range_1'] . "</td>"; echo "<td>" . $row['charge_1'] . "</td>"; echo "<td>" . $row['timelimit_1'] ."</td>"; //echo "<td>" . $row['change'] . "</td>"; // echo "<td>" . $row['pos'] . "</td>"; echo "</tr>"; } echo "</table>"; mysql_close($con);
?>
AJAX部分 getnews.js
// JavaScript Document
var xmlHttp
function showUser(str){ xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="getnews.php" url=url+"?q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null)}
function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp;}
数据库文件：center.sql
这里面存有全国所有省市县的名称以及送货方式、运费。这些数据我花费了14天才搞完，累死了！！！
只要用phpMyAdmin创建一个名字为“center”的数据库，再将这个文件导入就能用了。如果有需要这个文件的博友，请用邮箱联系我！
我的邮箱：gaofei019@163.com
具体效果如下：
