Home>

Recently made a project,Need to use provincial and municipal three-level linkage,Got a lot of information on the Internet,So with the following ideas and code

The basic idea is:dynamically create the option of the select control in js, get the province and city information obtained from the sql database in php through ajax,The code is a bit long,But many are similar,For example, the methods for obtaining provinces, cities, and districts in js are similar.In PHP, different select statements are executed through different parameters.

index.html code:

<! 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>Provincial and municipal tertiary linkage</title>
<meta http-equiv=content-type content="text/html;charset=gb2312">
<script src="scripts/thumbnails.js" type="text/javascript"></script>
</head>
</p>
<p>
<body>
</p>
<p>
<div>
<select onchange="sech (this.id)">
<option value="province">Please select province</option>
</select>
<select onchange="sech (this.id)">
<option value="city">Please select city</option>
</select>
<select>
<option value="county">Please select a county</option>
</select>
</div>
</p>
<p>
</div>
</body>
</html>

thumbnails.js code:

window.onload=getprovince;
function createrequest () {// ajax requires object in php interaction
try {
request=new xmlhttprequest ();// Create a new 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) {// Triggered when the province or city changes,select onchange event
var aa=document.getelementbyid (id);
if (id == "sheng") {
getcity (aa.value);// here aa.value is the provincial id
}
if (id == "shi")
{
getcounty (aa.value);// here aa.value is the city id
}
}
function getprovince () {// Get all provinces
request=createrequest ();
if (request == null) {
alert ("unable to create request");
return;
}
var url="getdetails.php?id=0";// id=0 to let it get all provinces when passed to php
request.open ("get", url, true);
request.onreadystatechange=displayprovince;// Set the callback function
request.send (null);// Send request
}
function getcity (id) {// Get the city corresponding to the province
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 the city corresponding area
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 () {// Dynamically increase the acquired data to select
if (request.readystate == 4) {
if (request.status == 200) {
var a=new array;
var b=request.responsetext;// assign the data returned by php to b
a=b.split (",");// Save this data in array a via ","
document.getelementbyid ("sheng"). length=1;
var obj=document.getelementbyid ("sheng");
for (i=0;i
obj.options.add (new option (a [i], i + 1));// Dynamic option is added to select, the first parameter is text and the second parameter is value
}
}
}
function displaycity () {// Dynamically increase the acquired data to 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;// Reselect
document.getelementbyid ("xian"). length=1;// Reselect
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 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:

<?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";
</p>
<p>
if ($_ request ["id"] == 0) {// Get province list
$conn->open ($connstr);// Establish a database connection
$sqlstr="select name from province";// Set query string
$rs=$conn->execute ($sqlstr);// Execute the query to get the result
$num_cols=$rs->fields->count ();// Get the number of columns in the dataset
$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;
}
</p>
<p>
if ($_ request ["id"]>0&&$_ request ["id"]<35) {// Get the list of cities corresponding to the province
$conn->open ($connstr);// Establish a database connection
$sqlstr="select name from city where cid =". $_ request ["id"];// Set query string
$rs=$conn->execute ($sqlstr);// Execute the query to get the result
$num_cols=$rs->fields->count ();// Get the number of columns in the dataset
$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;
}
</p>
<p>
if ($_ request ["id"]>100) {// Get the list of counties corresponding to provinces and cities
$conn->open ($connstr);// Establish a database connection
$sqlstr="select name from county where cid =". $_ request ["id"];// Set query string
$rs=$conn->execute ($sqlstr);// execute the query
$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;
}
?>

Database Design,Form province table, city table, county table.

Requirement:Theprovince table needs id and name. The id is recommended to be from 1 to 34.

The city table needs id, name and cid, id is cid * 100 + 1, cid is the superior of the city,For example, the superior of Shenzhen is Guangdong Province.If cid is 2, Shenzhen's id is 201, and so on.

The county table needs id, name, and cid, because it is a three-level relationship.id can be arbitrary,It is recommended to increase from 10001.cid is the superiorFor example, the cid of Baoan District is 201, and the cid of Longgang District is 201;

Screenshot:

html effect:

Effect after completion:

Note:php is server-side,It is recommended to debug through ip after publishing the website.

php
  • Previous Jquery values ​​and assignment examples for basic controls
  • Next How to generate character paintings from pictures