Home > Developer > JavaScript
This article examples for you to share the JS drop-down menu special effects, for your reference, the specific content as follows
Example 1: linkage of the provinces and Cities pull-down menu
The onchange event occurs when the contents of the domain change.
<script type= "Text/javascript" > var arr = new Array ();
Data array//definition data, structure: ID, name, parent ID Arr[arr.length] = [1, ' Beijing ', NULL];
Arr[arr.length] = [2, ' Sichuan Province ', null];
Arr[arr.length] = [3, ' Guangdong province ', null];
Arr[arr.length] = [4, ' Beijing ', 1];
Arr[arr.length] = [5, ' Chengdu City ', 2];
Arr[arr.length] = [6, ' Guangzhou ', 3];
Arr[arr.length] = [7, ' Shenzhen ', 3]; Dynamic Settings Drop-down Item function filloptions (type) {if (type = = ' province ') {//Get the DOM var Provin of the Province dropdown menu
CE = document.getElementById ("province"); province.innerhtml = ';
Content first empty//fill the province character var prostr = ' <option value= ' "></option> '; Traversal array for (var i=0; i<arr.length; i++) {var item = Arr[i]; The current item//If there is no parent ID, is the province if (item[2] = null) Prostr + = ' <option value= ' +item[0]+ ' >
' +item[1]+ ' </option> ';
} province.innerhtml = prostr;//fill New content }else if (type = = ' city ') {//get id var currproid = document.getElementById ("province") of the current province. Val
Ue
if (currproid = = ") return false;
Get the City pull-down menu dom var town = document.getElementById ("Cities"); city.innerhtml = ';
Content first empty//fill city characters var citystr = ' <option value= ' "></option> '; Traversal array for (var i=0; i<arr.length; i++) {var item = Arr[i]; Current item//Judge whether the current saved city if (item[2] = = currproid) Citystr + = ' <option value= ' +item[0]
+ ' > ' +item[1]+ ' </option> '; } city.innerhtml = citystr//Fill new content}} </script> <body style= "Text-align:center; "Onload=" Filloptions (' province '); > <!--definition pull-down menu--> province: <select id= "Province" onchange= "Filloptions (' City ')" ></select><br/> <br/>: <select id= "City" ></select><br/><br/> </body>
Instance 2: three-tier city and county Pull-down menu
<script type= "Text/javascript" > var arr = new Array ();
Data array//definition data, structure: ID, name, parent ID Arr[arr.length] = [1, ' Beijing ', NULL];
Arr[arr.length] = [2, ' Sichuan Province ', null];
Arr[arr.length] = [3, ' Guangdong province ', null];
Arr[arr.length] = [4, ' Beijing ', 1];
Arr[arr.length] = [5, ' Chengdu City ', 2];
Arr[arr.length] = [6, ' Guangzhou ', 3];
Arr[arr.length] = [7, ' Shenzhen ', 3];
Arr[arr.length] = [8, ' Wuhou ', 5];
Arr[arr.length] = [9, ' Qingyang District ', 5];
Arr[arr.length] = [10, ' Baiyun District ', 6];
Arr[arr.length] = [11, ' increased city ', 6];
Arr[arr.length] = [12, ' Conghua ', 6]; Dynamic Settings Drop-down Item function filloptions (type) {if (type = = ' province ') {//Get the DOM var Provin of the Province dropdown menu
CE = document.getElementById ("province"); province.innerhtml = ';
Content first empty//fill the province character var prostr = ' <option value= ' "></option> '; for (var i=0; i<arr.length; i++) {//traversal array var item = Arr[i];
Current item If there is no parent ID, then the province if (item[2] = = null) Prostr + = ' <option value= ' +item[0]+ ' > ' +item[1 '
+ ' </option> '; } province.innerhtml = Prostr; Populate new Content}else if (type = = ' city ') {//Get the current province id var currproid = document.getElementById ("Provin
Ce "). Value;
if (currproid = = ") return false;
Get the City pull-down menu dom var town = document.getElementById ("Cities"); city.innerhtml = ';
Content first empty//fill city characters var citystr = ' <option value= ' "></option> '; for (var i=0; i<arr.length; i++) {//traversal array var item = Arr[i]; Current item//Judge whether the current saved city if (item[2] = = currproid) Citystr + = ' <option value= ' +item[0]
+ ' > ' +item[1]+ ' </option> '; city.innerhtml = CITYSTR//Fill new content}else if (type = = ' Area ') {//get current City ID var cur Rcityid = document.geTelementbyid ("City"). Value;
if (Currcityid = = ") return false;
Get the DOM var area of the county pull-down menu = document.getElementById ("area"); area.innerhtml = ';
Content first empty//populated county characters var areastr = ' <option value= ' "></option> '; for (var i=0; i<arr.length; i++) {//traversal array var item = Arr[i]; Current item//judge whether the current city of County if (item[2] = = Currcityid) Areastr + = ' <option value= ' +item[
0]+ ' > ' +item[1]+ ' </option> '; } area.innerhtml = Areastr; Populate new Content}} </script> <body style= "text-align:center; onload=" Filloptions (' province '); " > <!--definition pull-down menu--> province: <select id= "Province" onchange= "Filloptions (' City ')" ></select><br/> <br/>: <select id= "City" onchange= "filloptions (' area ')" ></select><br/><br/> County/District: ; Select id= "Area" ></select><br/><br/> </body>
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
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
