javascript实现二级联动下拉框

javascript实现二级联动下拉框

    这个是简单也是最基本的下拉框联动的示例，这个示例主要针对那些只有二级联动，且第一级是固定的选项，第二级的内容也比较简单。这里使用了javascript来联动第二级下拉框。下一步准备实现ＡＪＡＸ联动，从后台读取数据。

 1  <! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN " >
 2  < HTML >
 3  < HEAD >
 4  < TITLE >  New Document  </ TITLE >
 5  < META NAME = " Generator "  CONTENT = " EditPlus " >
 6  < META NAME = " Author "  CONTENT = "" >
 7  < META NAME = " Keywords "  CONTENT = "" >
 8  < META NAME = " Description "  CONTENT = "" >
 9  < script language = " JavaScript "  type = " text/javascript " >
10       // 定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
11      var city = [
12      [ " 北京 " , " 天津 " , " 上海 " , " 重庆 " ],
13      [ " 南京 " , " 苏州 " , " 南通 " , " 常州 " ],
14      [ " 福州 " , " 福安 " , " 龙岩 " , " 南平 " ],
15      [ " 广州 " , " 潮阳 " , " 潮州 " , " 澄海 " ],
16      [ " 兰州 " , " 白银 " , " 定西 " , " 敦煌 " ]
17      ];
18 
19      function getCity(){
20           // 获得省份下拉框的对象
21          var sltProvince = document.form1.province;
22           // 获得城市下拉框的对象
23          var sltCity = document.form1.city;
24          
25           // 得到对应省份的城市数组
26          var provinceCity = city[sltProvince.selectedIndex  -   1 ];
27 
28           // 清空城市下拉框，仅留提示选项
29          sltCity.length = 1 ;
30 
31           // 将城市数组中的值填充到城市下拉框中
32           for (var i = 0 ;i < provinceCity.length;i ++ ){
33              sltCity[i + 1 ] = new  Option(provinceCity[i],provinceCity[i]);
34          }
35      }
36  </ script >
37  </ HEAD >
38 
39  < BODY >
40  < FORM METHOD = POST ACTION = ""  name = " form1 " >
41           < SELECT NAME = " province "  onChange = " getCity() " >
42               < OPTION VALUE = " 0 " > 请选择所在省份  </ OPTION >
43               < OPTION VALUE = " 直辖市 " > 直辖市  </ OPTION >
44               < OPTION VALUE = " 江苏省 " > 江苏省  </ OPTION >
45               < OPTION VALUE = " 福建省 " > 福建省  </ OPTION >
46               < OPTION VALUE = " 广东省 " > 广东省  </ OPTION >
47               < OPTION VALUE = " 甘肃省 " > 甘肃省  </ OPTION >
48           </ SELECT >
49           < SELECT NAME = " city " >
50               < OPTION VALUE = " 0 " > 请选择所在城市  </ OPTION >
51           </ SELECT >
52       </ FORM >
53  </ BODY >
54  </ HTML >
55 

这段代码比较简单。

如果对js不大熟悉，可以看看下面关于js处理select对象的内容：

1、使用selectedIndex属性获取当前选项的索引
    下拉框的选项是一个线性数组，每个选项都有一个索引，selectedIndex表示当前被选中的选项的索引号。结合options属性，可以得到被选中的option对象，从而对其做进一步的处理。当下拉框可多选时，selectedIndex属性返回第一个被选中的索引。
    selectedIndex是个只读的属性，想把通过索引指定的下拉框的项设置为选中状态，可以设置option对象的selected=true来实现。

2、为select对象添加一个选项
    sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
    new Option(provinceCity[i],provinceCity[i])表示创建一个值为provinceCity[i]，文本为provinceCity[i]的option对象，sltCity是页面上的city对象，i+1指定新添选项的位置。

3、清空一个select对象
    要将下拉框的所有选项删除有两种方法，
    第一种方法就是遍历删除：
   

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

    第二种方法比较简单，因此一般都使用此方法：

myselect.length = 0 ;