This example shares the js implementation select secondary linkage drop-down menu for your reference. The specific content is as follows
<%@ 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"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="JavaScript" type="text/javascript"> //Defines a two-dimensional array of cities, and the order in it is the same as that of provinces. Get the subscript value of the province by selectedIndex to get the corresponding city array var city=[ ["Beijing","Tianjin","Shanghai","Chongqing"], ["Nanjing","Suzhou","Nantong","Changzhou"], ["Fuzhou","Fuan","Longyan","Nanping"], ["Guangzhou","Chaoyang","Chaozhou","Chenghai"], ["Lanzhou","Baiyin","Dingxi","Dunhuang"]]; function getCity(){ //Get the object of the province drop-down box var sltProvince=document.form1.province; //Get the object of the city drop-down box var sltCity=document.form1.city; //Get the city array var of the corresponding province provinceCity=city[sltProvince.selectedIndex - 1]; //Clear the city drop-down box, leaving only the prompt option sltCity.length=1; //Fill the value in the city array into the city drop-down box for(var i=0;i<provinceCity.length;i++){ sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]); } } </script> </HEAD> <BODY> <FORM METHOD=POST ACTION="" name="form1"> <SELECT NAME="province" onChange="getCity()"> <OPTION VALUE="0">Please select your province</OPTION> <OPTION VALUE="Gansu">City</OPTION> <OPTION VALUE="Jiangsu Province">Jiangsu Province</OPTION> <OPTION VALUE="Fujian Province">Fujian Province</OPTION> <OPTION VALUE="Guangdong Province">Guangdong Province</OPTION> <OPTION VALUE="Gansu Province">Gansu Province</OPTION> </SELECT> <SELECT NAME="city"> <OPTION VALUE="0">Please select your city</OPTION> </SELECT> </FORM> </BODY></HTML>This code is relatively simple.
If you are not familiar with js, you can take a look at the following content about js processing select objects :
1. Use the selectedIndex property to get the index of the current option
The options in the drop-down box are a linear array, each option has an index, and the selectedIndex represents the index number of the currently selected option. Combined with the options attribute, the selected option object can be obtained, so that it can be further processed. When the drop-down box is multiple-selectable, the selectedIndex property returns the first selected index.
selectedIndex is a read-only property. If you want to set the item in the drop-down box specified through the index to the selected state, you can set the selected=true of the option object to achieve it.
2. Add an option to the select object
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
new Option(provinceCity[i],provinceCity[i]) means to create an option object with the value provinceCity[i] and the text is provinceCity[i]. sltCity is the city object on the page. i+1 specifies the location of the newly added option.
3. Clear a select object
There are two ways to delete all options in the drop-down box.
The first method is to traverse the deletion:
var l=myselect.length; for(var i=0;i<l;i++){ myselect.options[i]=null; }The second method is relatively simple, so this method is generally used:
myselect.length=0;