Home > Developer > Web Develop
Do not worry to realize the function first, we first need to clear the idea, want to achieve three-level linkage, the first to have three drop-down box, and then click the First drop-down menu, you can linkage to the second, click the second linkage to the third, to achieve the provincial urban level three linkage, the data table is as follows:
In order to be able to take out at any time in the future, we first set up a div called Sanji on the main page, and then use a JS page to quote:
The main page introduces jquery and JS:
<title>Untitled Document</title><Scriptsrc= "Jquery-3.2.0.min.js"></Script><Scriptsrc= "Sanji.js"></Script></Head><Body><H1>Area Query</H1><DivID= "Sanji"></Div></Body></HTML>
JS page is the focus, this page purely with JS (jquery) code to write, logic is to write three methods, so that the province to find the city, the city to find the district:
$ (document). Ready (function(e) {varstr = "<select id= ' sheng ' ></select><select id= ' shi ' ></select><select id= ' qu ' ></ Select> ";//Three drop-down to give a string$ ("#sanji"). html (str);//give the three drop-down string to the front divTiansheng ();//Load Provincial dataTianshi ();//loading the city's dataTianqu ();//data for the load zone $("#sheng"). Change (function() {Tianshi ();//Reload CityTianqu ();//Reload Zone }) $("#shi"). Change (function() {tianqu ();//data for the load zone })});functionTiansheng () {varPcode = "0001";//find the province's parent code.$.ajax ({async:false,//SyncURL: "sanchuli.php", Data:{pcode:pcode}, type:"POST", DataType:"TEXT", Success:function(data) {varHang = Data.split ("|");//Split Branch varstr = ""; for(vari=0;i) { varLie = Hang[i].split ("^");//Split Columnsstr + = "<option value=" "+lie[0]+" > "+lie[1]+" </option> "; } $("#sheng"). html (str); } });}functionTianshi () {varPcode = $ ("#sheng"). Val ();//find the city's parent code, save the value of the selected item$.ajax ({async:false, URL:"Sanchuli.php", Data:{pcode:pcode}, type:"POST", DataType:"TEXT", Success:function(data) {varHang = Data.split ("|"); varstr = ""; for(vari=0;i) { varLie = Hang[i].split ("^"); STR+ = "<option value=" "+lie[0]+" > "+lie[1]+" </option> "; } $("#shi"). html (str); } });}functionTianqu () {varPcode = $ ("#shi"). Val ();//find the parent code of the district, the value of the selected item in the city$.ajax ({URL:"Sanchuli.php", Data:{pcode:pcode}, type:"POST", DataType:"TEXT", Success:function(data) {varHang = Data.split ("|"); varstr = ""; for(vari=0;i) { varLie = Hang[i].split ("^"); STR+ = "<option value=" "+lie[0]+" > "+lie[1]+" </option> "; } $("#qu"). html (str); } });}
The final processing of the page is very simple, directly with a page can be, because the function is to achieve the same:
<? PHP $pcode $_post ["Pcode"]; require "DBDA.class.php"; $db New Dbda (); $sql = "SELECT * from Chinastates where parentareacode= ' {$pcode} '"; Echo $db->strquery ($sql);Eventually:
Ajax implementation Three-level linkage drop-down menu
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
