Ajax+php achieves level Three linkage

Using AJAX to achieve the page region selection level three linkage is as follows

When selecting the appropriate province, the corresponding drop-down selection is displayed for all relevant cities and regions

Let's see how it's achieved.

HTML page Section

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
JS section
1 //JavaScript Document2$ (document). Ready (function(e) {3     //find Id=sanji's Div, build three drop-down and throw it in.4$ ("#sanji"). HTML ("<select id= ' sheng ' ></select><select id= ' shi ' ></select><select id= ' qu ' ></select> ');5     6     //Load Provincial data7 Loadsheng ();8     //loading the city's data9 Loadshi ();Ten     //data for the load zone One loadqu (); A      -     //Drop -down and click events to province -$ ("#sheng"). Click (function(){ the             //Reload City - Loadshi (); -             //Reload Zone - loadqu (); +         }) -     //Drop -down and click events to the City +$ ("#shi"). Click (function(){ A             //Reload Zone at loadqu (); -         }) -      - }); - //ways to load provinces - functionLoadsheng () in { -     //Province's parent code to     varPcode = "0001"; + $.ajax ({ -Asyncfalse, theURL: "chuli.php", * Data:{pcode:pcode}, $Type: "POST",Panax NotoginsengDataType: "TEXT", -Successfunction(data) { the             varHang = Data.trim (). Split ("|"); +             varstr = ""; A              for(vari=0;i) the             { +                 varLie = Hang[i].split ("^"); -str = str+ "<option value= '" +lie[0]+ ">" +lie[1]+ "</option>"; $             } $$ ("#sheng"). html (str); -         } -     }); the } - //How to load a cityWuyi functionLoadshi () the { -     //find the city's parent code Wu     varPcode = $ ("#sheng"). Val (); - $.ajax ({ AboutAsyncfalse, $URL: "chuli.php", - Data:{pcode:pcode}, -Type: "POST", -DataType: "TEXT", ASuccessfunction(data) { +             varHang = Data.trim (). Split ("|"); the             varstr = ""; -              for(vari=0;i) $             { the                 varLie = Hang[i].split ("^"); thestr = str+ "<option value= '" +lie[0]+ ">" +lie[1]+ "</option>"; the             } the$ ("#shi"). html (str); -         } in     }); the } the  About //methods for loading zones the functionLoadqu () the { the     //find the parent code of the zone +     varPcode = $ ("#shi"). Val (); - $.ajax ({ theURL: "chuli.php",Bayi Data:{pcode:pcode}, theType: "POST", theDataType: "TEXT", -Successfunction(data) { -             varHang = Data.trim (). Split ("|"); the             varstr = ""; the              for(vari=0;i) the             { the                 varLie = Hang[i].split ("^"); -str = str+ "<option value= '" +lie[0]+ ">" +lie[1]+ "</option>"; the             } the$ ("#qu"). html (str); the         }94     }); the}
PHP Data processing page
1<?PHP2 require".. /database.class.php ";3 $db=Newdatebase ();4 $parentid=$_post["Pcode"];5 $sql= "SELECT * from Chinastates where parentareacode= ' {$pcode}‘";6 $arr=$db->query ($sql);7 $str="";8 foreach($arr  as $v){9             $str.=implode("^",$v)."|";Ten              One      A     } - $str=substr($str, 0,strlen($str)-1); - Echo $str; the  -  -?>
can be three-level linkage of the JS file as a plug-in, when the need for a three-level linkage effect can be introduced
The introduction method is the above HTML code style, the JS in the header information introduced (after the introduction of the jquery file), and then write a div in the body to store the three-level linkage
Ajax+php achieves level Three linkage