Php+mysql+ajax+js to realize the three-level linkage _php example of provincial urban area

The basic idea is: In JS dynamically create Select control option, through Ajax to obtain in PHP from the SQL database to obtain the city and province information, the code is a bit long, but many are similar, such as JS in the province, the city, the region to obtain similar methods, In PHP, different SELECT statements are executed using different parameters.

Index.html Code:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">
<title > Province Urban three-level linkage </title>
<meta http-equiv=content-type content= "text/html charset=gb2312" >
< Script src= "Scripts/thumbnails.js" type= "Text/javascript" ></script>

<body& gt;

<div id= "description"
<select style= "width:100px"; "Onchange=" Sech (this.id) "Id= sheng"
<option value= "province" > Please select Province </option>
</select
<select onchange= "Sech (this.id)" id= "Shi"
<option value= "City" > Please select Urban </option>
</select>
<select id= "Xian"
<option value= "County" > Please select County and township </option>
</select
</div>

</div>
</body>

Thumbnails.js Code:

Copy Code code as follows:

Window.onload = getprovince;

function Createrequest () {//ajax required object for PHP interaction
try {
Request = new XMLHttpRequest ();//Create a fresh Request object;
} 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) {//The onchange event of the Select when the change is triggered

var AA = document.getElementById (ID);
if (id== "Sheng") {
Getcity (Aa.value)//Here Aa.value is the ID of the province
}
if (id== "Shi")
{
Getcounty (Aa.value)//Here Aa.value is the ID of the city
}

}

function Getprovince () {//Get all Province
Request = Createrequest ();
if (request = = null) {
Alert ("Unable to create request");
Return
}
var url= "Getdetails.php?id=0";//id=0 when passed to PHP to get all the provinces
Request.open ("Get", url, True);
Request.onreadystatechange = displayprovince; Set callback function
Request.send (NULL); Send Request
}

function getcity (ID) {//Get province-corresponding city
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) {//get city corresponding District
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 () {//Adds the obtained data dynamically to the Select
if (request.readystate = = 4) {
if (Request.status = = 200) {
var a=new Array;
var b=request.responsetext;//assigns the data returned by PHP to B
A=b.split (",");//Through "," Save this data in array a
document.getElementById ("Sheng"). length=1;
var Obj=document.getelementbyid ("Sheng ');
for (i=0;i
Obj.options.add (New Option (a[i],i+1)); Dynamic build option is added to the Select, the first argument is text and the second parameter is value.

}
}
}


function displaycity () {//Adds the obtained data dynamically to the 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;//Select again
document.getElementById ("Xian"). length=1;//Select again
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 corresponds to the ID of the city.
}

}
}
}

function Displaycounty () {//Add the obtained data to the 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 Code:

Copy Code code as follows:

<?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) {//Get province list
$conn->open ($CONNSTR); Establishing a database connection
$SQLSTR = "Select name from province"; Set query string
$rs = $conn->execute ($SQLSTR); Execute query to get results
$num _cols = $rs->fields->count (); Get the number of data set columns
$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) {//Get the province-corresponding city list
$conn->open ($CONNSTR);//Establish a database connection
$sqlstr = "Select name from city where cid=". $_request[' ID ';//Set query string
$rs = $conn->execute ($SQLSTR);//Execute Query get Result
$num _cols = $rs->fields->count ();///Get the number of datasets
$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) {//Get a list of cities and counties
$conn->open ($CONNSTR); Establishing a database connection
$SQLSTR = "SELECT name from County where cid=". $_request[' ID ']; Set query string
$rs = $conn->execute ($SQLSTR); Execute query to get results
$num _cols = $rs->fields->count (); Get the number of data set columns
$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;
}
?>

Database design, Table province table, City table, County table.
Requirements: Province table needs ID and NAME,ID recommendations from 1 to 34, such as Beijing ID 1, Guangdong ID 2, and so on;
City table needs id,name and cid,id for Cid*100+1,cid, for example, Shenzhen's superior for Guangdong province, Cid 2, Shenzhen's ID is 201, and so on.
The county table requires Id,name and CID, since it is a three-level relationship, the ID is free, and the recommendation starts at 10001. CID is the supervisor, for example, the CID in Baoan District is 201, and Longgang District's CID is 201;

Screenshots:

HTML Effects:

Effect after completion:

Note: PHP is server-side, it is recommended to post the site through IP debugging.