The simplest js code to implement select secondary linkage drop-down menu

The simplest js code to implement select secondary linkage drop-down menu_javascript skills

WBOY

Release： 2016-05-16 15:05:09

Original

2150 people have browsed it

The example in this article shares with you the js implementation of the 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">
   //定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
   var city=[
   ["北京","天津","上海","重庆"],
   ["南京","苏州","南通","常州"],
   ["福州","福安","龙岩","南平"],
   ["广州","潮阳","潮州","澄海"],
   ["兰州","白银","定西","敦煌"]
   ];

   function getCity(){
     //获得省份下拉框的对象
     var sltProvince=document.form1.province;
     //获得城市下拉框的对象
     var sltCity=document.form1.city;     
     //得到对应省份的城市数组
     var provinceCity=city[sltProvince.selectedIndex - 1];
 
     //清空城市下拉框，仅留提示选项
     sltCity.length=1;
 
     //将城市数组中的值填充到城市下拉框中
     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">请选择所在省份 </OPTION>
       <OPTION VALUE="直辖市">直辖市 </OPTION>
       <OPTION VALUE="江苏省">江苏省 </OPTION>
       <OPTION VALUE="福建省">福建省 </OPTION>
       <OPTION VALUE="广东省">广东省 </OPTION>
       <OPTION VALUE="甘肃省">甘肃省 </OPTION>
     </SELECT>
     <SELECT NAME="city">
       <OPTION VALUE="0">请选择所在城市 </OPTION>
     </SELECT>
   </FORM>
 </BODY>
</HTML>

Copy after login

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 attribute to get the index of the current option
The options of the drop-down box are a linear array, each option has an index, and selectedIndex represents the index number of the currently selected option. Combined with the options attribute, the selected option object can be obtained for further processing. When the drop-down box allows multiple selections, 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 by the index to the selected state, you can set selected=true of the option object to achieve this.

2. Add an option to the select object
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
new Option(provinceCity[i],provinceCity[i]) means creating an option object with a value of provinceCity[i] and a text of provinceCity[i]. sltCity is the city object on the page. i+1 specifies the location of the new 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 and delete:

 var l=myselect.length;
 for(var i=0;i<l;i++){
 myselect.options[i]=null;
 }

Copy after login

The second method is relatively simple, so this method is generally used:
myselect.length=0;