In the past, I used to directly store the data associated with provincial/municipal linkages in a js file, and then associate the data at a level. Next I will introduce to you how to save the provincial/municipal data to the mysql database, then we use jQuery + PHP + JSON to achieve provincial/municipal linkage.
HTML
First, load the jquery library and cityselect plug-in the head.
| The Code is as follows: |
Copy code |
<Script type = "text/javascript" src = "js/jquery. js"> </script>
<Script type = "text/javascript" src = "js/jquery. cityselect. js"> </script> |
Next, we place three select statements in # city, and set the class attributes of the three select statements to prov, city, and dist, respectively, indicating the province, city, and district) three drop-down lists. Note: If you only want to implement provincial/municipal level-2 Association, remove the select statement of the third dist.
| The Code is as follows: |
Copy code |
<Div id = "city">
<Select class = "prov"> </select>
<Select class = "city" disabled = "disabled"> </select>
<Select class = "dist" disabled = "disabled"> </select>
</Div> |
JQuery
Calling the cityselect plug-in is very simple and can be called directly:
| The Code is as follows: |
Copy code |
$ ("# City"). citySelect ();
|
Custom parameter call, set the default province, city, and district.
| The Code is as follows: |
Copy code |
$ ("# City"). citySelect ({
Url: "js/city. min. js ",
Prov: "Hunan", // Province
City: "Changsha", // city
Dist: "Yuelu district", // District/County
Nodata: "none" // hide select when the subset has no data
});
|
Of course, you can also extend the custom drop-down list option data. You can set the drop-down content as needed. Note that the data format must be in JSON format.
| The Code is as follows: |
Copy code |
$ ("# City"). citySelect ({
Url: {"citylist ":[
{"P": "front-end technology", "c": [{"n": "HTML" },{ "n": "CSS", "": [{"s": "CSS2.0" },{ "s": "CSS3.0"}]},
{"N": "JAVASCIPT"}]},
{"P": "Programming Language", "c": [{"n": "C" },{ "n": "C ++ "}, {"n": "PHP" },{ "n": "JAVA"}]},
{"P": "Database", "c": [{"n": "Mysql" },{ "n": "SqlServer" },{ "n ": "Oracle"}]},
]},
Prov :"",
City :"",
Dist :"",
Nodata: "none"
});
|
You can also use PHP and other background languages to convert data in the database to JSON format, and then use the url parameter to point to the background address to achieve the effect of refreshing the link.
| The Code is as follows: |
Copy code |
$ ("# City"). citySelect ({
Url: "data. php"
}); |
Integrated the above Code
| The Code is as follows: |
Copy 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> provincial/municipal linkage effect based on jQuery + JSON </title>
<Link rel = "stylesheet" type = "text/css" href = "../css/main.css"/>
<Style type = "text/css">
. Demo {width: 80%; margin: 20px auto}
. Demo h3 {height: 32px; line-height: 32px}
. Demo p {line-height: 24px}
Pre {margin-top: 10px; padding: 6px; background: # f7f7f7}
</Style>
<Script type = "text/javascript" src = "../js/jquery. js"> </script>
<Script type = "text/javascript" src = "js/jquery. cityselect. js"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("# City_1"). citySelect ({
Nodata: "none ",
Required: false
});
$ ("# City_2"). citySelect ({
Prov: "Beijing ",
Nodata: "none"
});
$ ("# City_3"). citySelect ({
Prov: "Hunan ",
City: "Changsha"
});
$ ("# City_4"). citySelect ({
Prov: "Hunan ",
City: "Changsha ",
Dist: "Yuelu district ",
Nodata: "none"
});
$ ("# City_5"). citySelect ({
Url: {"citylist ":[
{"P": "front-end technology", "c": [{"n": "HTML" },{ "n": "CSS", "": [{"s": "CSS2.0" },{ "s": "CSS3.0"}] },{ "n": "JAVASCIPT"}]},
{"P": "Programming Language", "c": [{"n": "C" },{ "n": "C ++ "}, {"n": "Objective-C" },{ "n": "PHP" },{ "n": "JAVA"}]},
{"P": "Database", "c": [{"n": "Mysql" },{ "n": "SqlServer" },{ "n ": "Oracle" },{ "n": "DB2"}]},
]},
Prov :"",
City :"",
Dist :"",
Nodata: "none"
});
});
</Script>
</Head> <Body>
<Div id = "main">
<Div class = "demo">
<H3> direct call <P> secondary interaction. The default option is: Select </p>
<Div id = "city_1">
<Select class = "prov"> </select>
<Select class = "city" disabled = "disabled"> </select>
</Div>
<P> three levels of association, default Province: Beijing, hiding sub-level select without data </p>
<Div id = "city_2">
<Select class = "prov"> </select>
<Select class = "city" disabled = "disabled"> </select>
<Select class = "dist" disabled = "disabled"> </select>
</Div>
<Pre>
$ ("# City_1"). citySelect ({nodata: "none", required: false });
$ ("# City_2"). citySelect ({prov: "Beijing", nodata: "none "});
</Pre>
</Div>
</Body>
</Html> |
Provincial linkage effect source code download: http://file.bKjia. c0m/download/2013/05/15/cityselect.rar
