The examples in this article share the special effects of the js drop-down menu for your reference. The specific content is as follows
Example 1: Linked provincial and municipal drop-down menu
The onchange event occurs when the content of the domain changes.
<script type="text/javascript"> var arr = new Array(); //Data array//Define data, structure: id, name, parent id arr[arr.length] = [1, 'Beijing', null]; arr[arr.length] = [2, 'Sichuan', null]; arr[arr.length] = [3, 'Guangdong', null]; arr[arr.length] = [4, 'Beijing', 1]; arr[arr.length] = [5, 'Chengdu', 2]; arr[arr.length] = [6, 'Guangzhou', 3]; arr[arr.length] = [7, 'Shenzhen', 3]; //Dynamic setting of the pull-down item function fillOptions(type){ if(type == 'province'){ //Get the DOM of the province drop-down menu var province = document.getElementById("province"); province.innerHTML = ''; //Content empty first//Fill in the sub-character var proStr = '<option value=""></option>'; //Transfer the array for(var i=0; i<arr.length; i++){ var item = arr[i]; //Current item//If there is no parent id, it is the province if(item[2] == null) proStr += '<option value='+item[0]+'>'+item[1]+'</option>'; } province.innerHTML = proStr;//Fill in new content}else if(type == 'city'){ //Get the id of the current province var currProId = document.getElementById("province").value; if(currProId == '') return false; //Get the DOM of the city drop-down menu var city = document.getElementById("city"); city.innerHTML = ''; //Fill in the content first//Fill in the character var cityStr = '<option value=""></option>'; //Transweep the array for(var i=0; i<arr.length; i++){ var item = arr[i]; //Current item//Judge whether it is 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');"> <!-- Define drop-down menu--> Savings: <select id="province" onchange="fillOptions('city')"></select><br/><br/> City: <select id="city"></select><br/><br/> </body>Example 2: Three-level linkage of provinces, cities and counties drop-down menus
<script type="text/javascript"> var arr = new Array(); //Data array//Define data, structure: id, name, parent id arr[arr.length] = [1, 'Beijing', null]; arr[arr.length] = [2, 'Sichuan', null]; arr[arr.length] = [3, 'Guangdong', null]; arr[arr.length] = [4, 'Beijing', 1]; arr[arr.length] = [5, 'Chengdu', 2]; arr[arr.length] = [6, 'Guangzhou', 3]; arr[arr.length] = [7, 'Shenzhen', 3]; arr[arr.length] = [8, 'Wuhou District', 5]; arr[arr.length] = [9, 'Qingyang District', 5]; arr[arr.length] = [10, 'Baiyun District', 6]; arr[arr.length] = [11, 'Zengcheng City', 6]; arr[arr.length] = [12, 'Conghua City', 6]; //Dynamic setting of the pull-down project function fillOptions(type){ if(type == 'province'){ //Get the DOM of the province drop-down menu var province = document.getElementById("province"); province.innerHTML = ''; //The content is empty first//Fill in the characters of the saved var proStr = '<option value=""></option>'; for(var i=0; i<arr.length; i++){ //Transfer the array var item = arr[i]; //Current item//If there is no parent id, it is the province if(item[2] == null) proStr += '<option value='+item[0]+'>'+item[1]+'</option>'; } province.innerHTML = proStr; //Fill in new content}else if(type == 'city'){ //Get the id of the current province var currProId = document.getElementById("province").value; if(currProId == '') return false; //Get the DOM of the city drop-down menu var city = document.getElementById("city"); city.innerHTML = ''; //Content empty first//Fill in the city character var cityStr = '<option value=""></option>'; for(var i=0; i<arr.length; i++){ //Transfer the array var item = arr[i]; //Current item//Judge whether it is the currently saved city if(item[2] == currProId) cityStr += '<option value='+item[0]+'>'+item[1]+'</option>'; } city.innerHTML = cityStr ;//Fill in new content}else if(type == 'area'){ //Get the id of the current city var currCityId = document.getElementById("city").value; if(currCityId == '') return false; //Get the DOM of the district and county drop-down menu var area = document.getElementById("area"); area.innerHTML = ''; //Fill in the district and county character var areaStr = '<option value=""></option>'; for(var i=0; i<arr.length; i++){ //Transfer the array var item = arr[i]; //Current item//Judge whether it is a district or county under the current city if(item[2] == currCityId) areaStr += '<option value='+item[0]+'>'+item[1]+'</option>'; } area.innerHTML = areaStr; //Fill new content} }</script><body style="text-align:center;" onload="fillOptions('province');"> <!-- Define drop-down menu--> Province: <select id="province" onchange="fillOptions('city')"></select><br/><br/> City: <select id="city" onchange="fillOptions('area')"></select><br/><br/> County/district: <select id="area"></select><br/><br/></body>The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.