Home > Developer > JavaScript
This article to reflect the simple JavaScript implementation of the provincial urban three-level linkage effects, do not need to access the backend server, do not use Ajax, no refresh, pure JS to achieve the provincial and urban three-level linkage. When the provincial and municipal data changes are only to tune JS can be.
When we register a website, will see the provincial urban level three linkage, the following brief introduction
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 | <!doctype html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "Generator" Content= "editplus®" > <meta name= "Author" content= "" > <meta name= "Keywords" content= "" > <meta name= " Description "content=" "> <title>Document</title> </head> <body> <select id=" province " Onchange= "CK ()" > <option>--Please select--</option> </select> <select id= "City" > <option>-- Please select--</option> </select> <select id= "san" > <option>--Please select--</option> </select> </body> <script type= "Text/javascript" >//====================================== the First method: to obtain provincial and municipal two cascade menu = = = =======================//Get the ID of the province var prame= document.getelementbyid ("province"); var city= document.getElementById ("City"); var san= document.getelementbyid ("san"); Create an array of provinces and cities Var citylist=new array (); Create another array var zushu=new array; citylist[' Jiangxi province ' = [' Nanchang ', ' Fuzhou ', ' Shangrao ', ' Yingtan ', ' Fengcheng ', ' Jian ']; citylist[' Henan province ' = [' Zhengzhou city', ' Luoyang ']; citylist[' Hubei province ' = [' Wuhan city ', ' Yichang ']; citylist[' Fujian province '] = [' Fuzhou ', ' Sanming ', ' Foshan ']; zushu[' Nanchang ']=[' Nanchang County ', ' Qingyunpu District ', ' Liantang Town ']; zushu[' Fuzhou ']=[' Linchuan District ', ' Yunshan town ', ' Chang Kai Zhen ']; for (var i in citylist) {Prame.add (new Option (i,i), null);} prame.onchange=function () {var prame= document.getelementbyid ("Province"). Value; var city= document.getElementById ("City"); city.options.length=0; For (var k in citylist[prame]) {City.add (new Option (citylist[prame][k],citylist[prame][k)), null);} City.onchange=function () {var city= document.getelementbyid ("City"). value; var san= document.getelementbyid ("san"); nbsp san.options.length=0; For (var k in zushu[city]) {San.add (new Option (Zushu[city][k)), (zushu[city][k), null);} </script> <!--------------------------------The second method: three-level linkage menu----------------------<script type= "text/ JavaScript "> /Get Province ID var province=document.getelementbyid (" province "); Province.add (New Option ("Jiangxi province", "Jiangxi Province"), null); Province.add (New Option ("Fujian province", "Fujian province"), null); Province.add (New OptIon ("Guangdong province", "Guangdong province"), null); function ck () { var City=document.getelementbyid ("City"); var Num=province.selectedindex; city.options.length=0 ; switch (num) {case 1:city.add (new option ("Nanchang", "Nanchang"), null); City.add (new option ("Fuzhou", "Fuzhou"), null); City.add ( New Option ("Shangrao", "Shangrao"), null); City.add (New Option ("Jian", "Jian"), null); Break Case 2:city.add (New Option ("Xiamen City", "Xiamen City"), null); City.add (New Option ("Sanming", "Sanming"), null); City.add (New Option ("Putian", "Putian"), null); City.add (New Option ("Longyan", "Longyan"), null); Break Case 3:city.add (New Option ("Guangzhou", "Guangzhou"), null); City.add (New Option ("Dongguan", "Dongguan"), null); City.add (New Option ("Baoding", "Baoding"), null); City.add (New Option ("Zhuhai", "Zhuhai"), null); Break } var Qu=document.getelementbyid ("Qu"); var Num1=province.selectedindex; qu.options.length=0; Switch (NUM1) {case 1:qu.add (new option ("Linchuan District", "Linchuan District"), null); Qu.add (new option ("Qingyunpu District", "Qingyunpu District"), null); Qu.add (new option ( "Nanchang Town", "Nanchang Town"), null); Qu.add (New Option ("Yunshan Town", "Yunshan town"), null); Break Case 2: Qu.add (New Option ("Pauan", "Pauan"), null); Qu.add (New Option ("Futian District", "Futian District"), null); Qu.add (New Option ("Jiangle County", "Jiangle County"), null); Qu.add (New Option ("Xiamen area", "Xiamen area"), null); Break Case 3:qu.add (New Option ("Canton County", "Guang Xian County"), null); Qu.add (New Option ("West Dongguan area", "West Dongguan area"), null); Qu.add (New Option ("San Hai County", "Three Seas County"), null); Qu.add (New Option ("Hiroshima area", "Hiroshima area"), null); Break }} </script>--> </html> |
The above is the entire contents of this article, I hope you can enjoy.
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
