Using JavaScript to implement a two-level linkage menu

This article focuses on using JavaScript to achieve level two linkage menu. As we all know, two-level linkage menu is more common in the actual development, although the implementation method is very different, but using JavaScript to implement it is the basis for the implementation of other frameworks. It is necessary to study and explore.

1. Requirements

For example, the common choice of the region of the 2-level linkage menu, when the province is selected, the Level 2 menu options will vary.

2. Implementation ideas 2.1 pages use 2 Select and differentiate by ID

<select id= "City" ></select>    <select id= "District" ></select>

2.2 Data about menu options

Use 1 arrays for data on Level 1 menu options

The data for the Level 2 menu option is stored using 1 two-dimensional arrays, and the data in the corresponding subscript position of the 2 arrays is the corresponding

Urban var city = [' Please select ', ' Beijing ', ' Tianjin ', ' Shanghai ', ' Chongqing '];//area var district = [[],                [' Dongcheng ', ' Xicheng ', ' Chaoyang ', ' Haidian '],                [' Hedong ', ' Hexi ', ' Hebei ', ' Nankai '],                [' Huangpu ', ' Xuhui ', ' changning ', ' Jingan '],                [' Yubei ', ' yuzhong ', ' Jiangbei ', ' Jiangjin '];

2.3 The implementation of the 1-level menu option is displayed by default after the page loads and requires the use of window.onload to display the Level 1 menu

Window.onload=function () {createcity ();d Ocument.getelementbyid ("City"). onchange= createdistrict;};

2.4 For the display of level 1 menus, the option object and select are used. Options.add method

function createcity () {//Get Level 1 menu Selectvar ci = document.getElementById ("city");//Add optionfor for 1-level menu select (var i in city) { var op = new Option (City[i],city[i]); Ci.options.add (OP);}}

2.5 about implementing Level 2 linkage, consider using onchange to dynamically load 2-level menu options for Level 1 menus

document.getElementById ("City"). Onchange= createdistrict;

2.6 about the implementation of the 2-level linkage, using Select.selectedindex to obtain a 1-level menu of the current selection of the subscript, and thus determine the corresponding 2-level menu options, and then add options for the 2-level menu is OK

function Createdistrict () {//Gets the subscript for the option of the currently selected level menu var index = document.getElementById ("City"). selectedindex;// Get Level 2 menu Selectvar di = document.getElementById ("district");//clear Level Two menu option di.options.length=0;//add optionfor for 2-level menu select ( var i in District[index]) {var op = new Option (District[index][i],district[index][i]);d i.options.add (OP);}}

3. Code implementation

submenu.jsp

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%><%string path = Request.getcontextpath () ; String basepath = request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";%> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
Run effect

4. Precautions4.1 about the 2-level linkage to achieve the effect of the guarantee, you need to be in each linkage to the existing level of the 2 menu options to clear, otherwise there will be incorrect display effect, the specific implementation is to add 2 level menu options before each addition to the Level 2 menu options to empty, using select.options.length = 0;
Get Level 2 menu Selectvar di = document.getElementById ("district");//clear Level two menu option di.options.length=0;
4.2 About the default display problem of the first load of the page, you can add 1 options for the Level 1 menu "Please select", the corresponding 2 level menu option data is 1 empty array, that is, the data from the menu options to control
Urban var city = [' Please select ', ' Beijing ', ' Tianjin ', ' Shanghai ', ' Chongqing '];//area var district = [[],                [' Dongcheng ', ' Xicheng ', ' Chaoyang ', ' Haidian '],                [' Hedong ', ' Hexi ', ' Hebei ', ' Nankai '],                [' Huangpu ', ' Xuhui ', ' changning ', ' Jingan '],                [' Yubei ', ' yuzhong ', ' Jiangbei ', ' Jiangjin '];
 The above is the use of JavaScript to achieve two-level linkage menu content, on this basis can also be more complex multi-level menu, and in the actual application of Ajax from the background database to remove data for dynamic display and so on. 






Using JavaScript to implement a two-level linkage menu