中文字幕日韩一区二区_国产一区二区av_国产毛片av_久久久久国产一区_色婷婷电影_国产一区二区精品

PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)

2014-10-22 20:19:15 分類：php技術(shù) 閱讀()

基本思想就是：在JS動(dòng)態(tài)創(chuàng)建select控件的option,通過(guò)Ajax獲取在php從SQL數(shù)據(jù)庫(kù)獲取的省市區(qū)信息，代碼有點(diǎn)長(zhǎng)，但很多都是類似的，例如JS中省、市、區(qū)獲取方法類似，php中通過(guò)參數(shù)不同執(zhí)行不同的select語(yǔ)句。

index.html代碼：

復(fù)制代碼 代碼如下:
<!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>
<title>省市區(qū)三級(jí)聯(lián)動(dòng)</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script src="scripts/thumbnails.js" type="text/Javascript"></script>
</head>

<body>

<div id="description">
<select style="width:100px; " onchange="sech(this.id)" id="sheng">
<option value="province">請(qǐng)選擇省份</option>
</select>
<select onchange="sech(this.id)" id="shi">
<option value="city">請(qǐng)選擇市區(qū)</option>
</select>
<select id="xian">
<option value="county">請(qǐng)選擇縣鄉(xiāng)</option>
</select>
</div>

</div>
</body>
</html>

thumbnails.js代碼：

復(fù)制代碼 代碼如下:
window.onload = getProvince;

function createRequest() {//Ajax于php交互需要對(duì)象
  try {
    request = new XMLHttpRequest();//創(chuàng)建一個(gè)新的請(qǐng)求對(duì)象;
  } 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) {//省市改變時(shí)觸發(fā)，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時(shí)傳遞至php時(shí)讓其獲取所有省
  request.open("GET", url, true);
  request.onreadystatechange = displayProvince; //設(shè)置回調(diào)函數(shù)
  request.send(null);    //發(fā)送請(qǐng)求
}

function getCity(id){//獲取省對(duì)應(yīng)的市
  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){//獲取市對(duì)應(yīng)的區(qū)
  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() {//將獲取的數(shù)據(jù)動(dòng)態(tài)增加至select
  if (request.readyState == 4) {
    if (request.status == 200) {
  var a=new Array;
var b=request.responseText;//將php返回的數(shù)據(jù)賦值給b
 a=b.split(",");//通過(guò)","將這一數(shù)據(jù)保存在數(shù)組a中
  document.getElementById("sheng").length=1;
  var obj=document.getElementById("sheng'); 
  for(i=0;i
      obj.options.add(new Option(a[i],i+1)); //動(dòng)態(tài)生成OPTION加到select中，第一個(gè)參數(shù)為Text,第二個(gè)參數(shù)為Value值.

    }
  }
}

 
function displayCity() {//將獲取的數(shù)據(jù)動(dòng)態(tài)增加至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對(duì)應(yīng)的是市的ID。
}

    }
  }
}

function displayCounty() {//將獲取的數(shù)據(jù)增加至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代碼：

復(fù)制代碼 代碼如下:
<?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); //建立數(shù)據(jù)庫(kù)連接
$sqlstr = "select name from Province"; //設(shè)置查詢字符串
$rs = $conn->Execute($sqlstr); //執(zhí)行查詢獲得結(jié)果
$num_cols = $rs->Fields->Count(); //得到數(shù)據(jù)集列數(shù)
$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){//獲得省對(duì)應(yīng)的市列表
$conn->Open($connstr); //建立數(shù)據(jù)庫(kù)連接
$sqlstr = "select name from City where cid=".$_REQUEST['ID']; //設(shè)置查詢字符串
$rs = $conn->Execute($sqlstr); //執(zhí)行查詢獲得結(jié)果
$num_cols = $rs->Fields->Count(); //得到數(shù)據(jù)集列數(shù)
$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){//獲得省市對(duì)應(yīng)的縣列表
$conn->Open($connstr); //建立數(shù)據(jù)庫(kù)連接
$sqlstr = "select name from County where cid=".$_REQUEST['ID']; //設(shè)置查詢字符串
$rs = $conn->Execute($sqlstr); //執(zhí)行查詢獲得結(jié)果
$num_cols = $rs->Fields->Count(); //得到數(shù)據(jù)集列數(shù)
$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;
}
?>

數(shù)據(jù)庫(kù)設(shè)計(jì)，表格Province表，City表，County表。
要求：Province表需要id和name，id建議從1至34，例如北京id為1，廣東id為2，以此類推；
        City表需要id,name和cid，id為cid*100+1，cid為該市的上級(jí)，例如深圳的上級(jí)為廣東省,cid為2的話，深圳的id就是201，以此類推。
        County表需要id,name和cid，因?yàn)槭侨?jí)的關(guān)系，id可以隨意，建議從10001開(kāi)始自增。cid為所在上級(jí)，例如寶安區(qū)的cid為201，龍崗區(qū)的cid也為201；

截圖：

 HTML效果：

完成后效果：

備注：php是服務(wù)器端的，建議發(fā)布網(wǎng)站后通過(guò)ip調(diào)試。

php技術(shù)：PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

標(biāo)簽：
主站蜘蛛池模板： 色婷婷婷婷色 | 91精品国产91久久久久久丝袜 | 久久天堂 | 玖草资源 | 999精品视频在线观看 | 99精品视频在线观看 | 国产成人精品久久二区二区 | 日本中文字幕视频 | 男女免费在线观看视频 | 91久久国产 | 国产综合久久 | 一本一道久久a久久精品蜜桃 | 日韩在线精品强乱中文字幕 | 高清av电影| 亚洲小说图片 | 在线日韩 | 97精品国产97久久久久久免费 | 综合色久 | 久久精品日产第一区二区三区 | 国产精品久久久久久久岛一牛影视 | 亚洲高清视频在线 | 国产高清在线 | 毛片1| 欧美日韩视频在线第一区 | 亚洲精品免费观看 | 精品1区2区 | 在线成人www免费观看视频 | 久久综合888| 日韩精品久久一区 | h小视频 | 亚洲欧美中文字幕 | 成人欧美一区二区三区黑人孕妇 | www.操.com| 成人在线亚洲 | 荷兰欧美一级毛片 | 精品一区二区三区在线观看国产 | 91视频一区二区 | www.亚洲视频 | 91免费看片 | 欧美三级成人理伦 | 国产精品一区二区免费 |