YiDaoJ's Blog

JavaScript实现select二级联动下拉菜单

Posted on | In |

在不使用AJAX的情况下，如何用JavaScript实现二级联动的下拉菜单呢？

比如，填写表格如出生地时，需要先选择国家，再选择城市；这就要求出现在城市下拉列表中的各个城市必须属于前一列表中的国家。

以下列国家和城市为例：

China Germany Japan US
Beijing Berlin Tokyo New York
Shanghai Cologne Kyoto Chicago
Shenzhen Munich Osaka Los Angeles
Chongqing Stuttgart Yokohama Houston
Tianjin Dortmund

代码实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
  <title>Country & City selection</title>
  <script type="text/javascript">
  // 创建数组，用于存储国家名称
  var country = ["China", "Germany", "Japan", "US"];
  // 2D-Array 创建二维数组，用于存储城市名称
  var city = [
                ["Beijing", "Shanghai", "Shenzhen", "Chongqing", "Tianjin"],
                ["Berlin", "Cologne", "Munich", "Stuttgart", "Dortmund"],
                ["Tokyo", "Kyoto", "Osaka", "Yokohama"],
                ["New York", "Chicago", "Los Angeles", "Houston"]
              ];
  // 在网页加载完成时
  window.onload = function(){
    createCountry();
    document.getElementById("country").onchange = createCity;
  };
  function createCountry(){
  var land = document.getElementById("country");
  //遍历country数组，将每一个选项加入到列表中
  for(var i in country){
    var op = new Option(country[i], country[i]);	
    // param1: text, param2:value
    land.options.add(op);
    }			
  }
  function createCity(){
  var cityIndex = document.getElementById("country").selectedIndex;
  // 获取每一个国家在列表中所对应的index
  // 0-4, 0: "Selecte your country"
  // 1-4: China, Germany, Japan, US
  
  var stadt = document.getElementById("city");     	
  stadt.options.length = 0;	 	// 将city原有的所有选项移除
  for(var i in city[cityIndex-1]){				
    var op = new Option(city[cityIndex-1][i], city[cityIndex-1][i]);
    stadt.options.add(op);
    }
  }
  </script>
</head>
<body>
  <h1>Select your country and city</h1>
  <div>
    <select id="country">
      <option> ===== Select your country ===== </option>
    </select>
    <select id="city" onchange="sendResult()"> 
      <option> === City === </option>
    </select>
  </div>
  <p id="result"></p>
</body>
</html>

点击可查看范例演示 。

欢迎交流。

注：此文章为本人原创，转载时烦请必注明出处。