新网创想网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
你这省市联动的数据设计不太好,最好的方式是给每个城市和省份一个区域编码,然后存储选择的城市编码,在回显的时候在根据code,去通过code去查询对应的城市就好了。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比丰林网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式丰林网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖丰林地区。费用合理售后完善,十年实体公司更值得信赖。
基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省、市、区获取方法类似,PHP中通过参数不同执行不同的select语句。
index.html代码:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
""
html xmlns=""
head
title省市区三级联动/title
META http-equiv=Content-Type content="text/html; charset=gb2312"
script src="scripts/thumbnails.js" type="text/javascript"/script
/head
thumbnails.js代码:
window.onload = getProvince;
function createRequest() {//Ajax于PHP交互需要对象
try {
request = new XMLHttpRequest();//创建一个新的请求对象;
} catch (tryMS) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMS) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
return request;
}
function sech(id) {//省市改变时触发,select的onchange事件
var aa = document.getElementById(id);
if(id=="sheng"){
getCity(aa.value);//这里aa.value为省的id
}
if(id=="shi")
{
getCounty(aa.value);//这里aa.value为市的id
}
}
function getProvince() {//获取所有省
request = createRequest();
if (request == null) {
alert("Unable to create 信稿让request");
return;
}
var url= "getDetails.php?ID=0";//ID=0时传递至PHP时让其获取所有省
request.open("GET", url, true);
request.onreadystatechange = displayProvince; //设置回调函数
request.send(null); //发送请求
}
function getCity(id){//获取省对应的市
request = createRequest();
if (request == 敬念null) {
alert("Unable to create request");
return;
}
var url= "getDetails.php?ID=" + escape(id);
request.open("GET", url, true);
request.onreadystatechange = displayCity;
request.send(null);
}
function getCounty(id){//获取市对应的区
request = createRequest();
if (request == null) {
alert("Unable to create request");
return;
}
var url= "getDetails.php?ID=" + escape(id);
request.open("GET", url, true);
request.onreadystatechange = displayCounty;
request.send(null);
}
function displayProvince() {//将获取的数据动态增加滑局至select
if (request.readyState == 4) {
if (request.status == 200) {
var a=new Array;
var b=request.responseText;//将PHP返回的数据赋值给b
a=b.split(",");//通过","将这一数据保存在数组a中
document.getElementById("sheng").length=1;
var obj=document.getElementById("sheng');
for(i=0;i
obj.options.add(new Option(a[i],i+1)); //动态生成OPTION加到select中,第一个参数为Text,第二个参数为Value值.
}
}
}
function displayCity() {//将获取的数据动态增加至select
if (request.readyState == 4) {
if (request.status == 200) {
var a=new Array;
var b=request.responseText;
a=b.split(",");
document.getElementById("shi").length=1;//重新选择
document.getElementById("xian").length=1;//重新选择
if(document.getElementById("sheng").value!="province"){
var obj=document.getElementById('shi');
for(i=0;i
obj.options.add(new Option(a[i], document.getElementById("sheng").value*100+i+1)); //ocument.getElementById("sheng").value*100+i+1对应的是市的ID。
}
}
}
}
function displayCounty() {//将获取的数据增加至select
if (request.readyState == 4) {
if (request.status == 200) {
var a=new Array;
var b=request.responseText;
a=b.split(",");
document.getElementById("xian").length=1;
if(document.getElementById("sheng").value!="province"document.getElementById("shi").value!="city"){
var obj=document.getElementById('xian');
for(i=0;i
obj.options.add(new Option(a[i],i+1001));
}
}
}
}
getDetails.php代码:
?php
header("Content-Type: text/html; charset=gb2312");
$conn = new COM("ADODB.Connection") or die("Cannot start ADO");
$connstr = "Provider=SQLOLEDB;Persist Security Info=False;User ID=root;Password=123456;Initial Catalog=area;Data Source=localhost";
if($_REQUEST['ID']==0){//获得省列表
$conn-Open($connstr); //建立数据库连接
$sqlstr = "select name from Province"; //设置查询字符串
$rs = $conn-Execute($sqlstr); //执行查询获得结果
$num_cols = $rs-Fields-Count(); //得到数据集列数
$Province=array();
$i=0;
while (!$rs-EOF) {
$Province[$i]=$rs-Fields['name']-Value.",";
$rs-MoveNext();
$i++;
}
foreach($Province as $val)
echo $val;
$conn-Close();
$rs = null;
$conn = null;
}
if($_REQUEST['ID']0$_REQUEST['ID']35){//获得省对应的市列表
$conn-Open($connstr); //建立数据库连接
$sqlstr = "select name from City where cid=".$_REQUEST['ID']; //设置查询字符串
$rs = $conn-Execute($sqlstr); //执行查询获得结果
$num_cols = $rs-Fields-Count(); //得到数据集列数
$City=array();
$i=0;
while (!$rs-EOF) {
$City[$i]=$rs-Fields['name']-Value.",";
$rs-MoveNext();
$i++;
}
foreach($City as $val)
echo $val;
$conn-Close();
$rs = null;
$conn = null;
}
if($_REQUEST['ID']100){//获得省市对应的县列表
$conn-Open($connstr); //建立数据库连接
$sqlstr = "select name from County where cid=".$_REQUEST['ID']; //设置查询字符串
$rs = $conn-Execute($sqlstr); //执行查询获得结果
$num_cols = $rs-Fields-Count(); //得到数据集列数
$County=array();
$i=0;
while (!$rs-EOF) {
$County[$i]=$rs-Fields['name']-Value.",";
$rs-MoveNext();
$i++;
}
foreach($County as $val)
echo $val;
$conn-Close();
$rs = null;
$conn = null;
}
?
数据库设计,表格Province表,City表,County表。
要求:Province表需要id和name,id建议从1至34,例如北京id为1,广东id为2,以此类推;
City表需要id,name和cid,id为cid*100+1,cid为该市的上级,例如深圳的上级为广东省,cid为2的话,深圳的id就是201,以此类推。
County表需要id,name和cid,因为是三级的关系,id可以随意,建议从10001开始自增。cid为所在上级,例如宝安区的cid为201,龙岗区的cid也为201;
截图:
HTML效果:
完成后效果:
你这 是通过 后台取数据的,关改 上面的代码是没有用的,省市联动一般有两种做法。第一种,下载一衡旁个js的省 市联动的插件,调用插件就可以,第二种,就是存在数据库里,然后前端当省框的值改变 的时候就ajax去后台取出该省的所有市在市框中列出来,然后再咐卖橡市框的值改变的时候,再后台去取出该市所有的县区在前端列出来。现在大部份配吵是用第一种做法比较好,下个插件吧
方法1:onchange一次就提交一次表单,就可以传值给php了
方法2:Ajax提交
大概js传值给PHP就这两种办法了。
或者你可以考虑一次讲所有数据用PHP写成JS二维数组。当然,如果数据量太大,这样是不行的。