js 级联菜单

来源：互联网发布：淘宝店铺招牌图片素材编辑：程序博客网时间：2024/06/06 03:32

源代码：http://yuncode.net/code/c_5051c06d80ad295

01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02<html xmlns="http://www.w3.org/1999/xhtml">

03<head>

04<title>js 级联菜单</title>

05<style type="text/css">

06#Select2 {

07 width: 120px;

08}

09#Select1 {

10 width: 100px;

11}

12</style>

13<script type="text/javascript"language="javascript">

14 vararr =newArray(["河南省","1","开封市", "南阳市","安阳市","郑州市" ], ["山东省",

15 "2","济南市","日照市", "潍坊市","菏泽市"],

16 ["广东省","3", "广州市","珠海市","深圳" ], [ "吉林省", "4","大连市","沈阳市",

17 "哈尔滨市","冰城"]);

18 functionshengshi() {

19 for(var i = 0; i < arr.length; i++) {

20 document.getElementById("Select2").options.add(newOption(

21 arr[i][0], arr[i][1]))

22 }

23 ;

24 }

25 functiongetCity() {

26 document.getElementById("Select1").options.length = 1;

27 vark = document.getElementById("Select2").value - 1;

28 for(var j = 2; j < arr[k].length; j++) {

29 document.getElementById("Select1").options.add(newOption(

30 arr[k][j], arr[k][j]))

31 }

32 }

33</script>

34</head>

35<body onload="shengshi()">

36<p>所在省：

37 <select id="Select2"name="D2"onchange="getCity()">

38 <option></option>

39 </select>

40 所在市：

41 <select id="Select1"name="D1">

42 <option></option>

43 </select>

44</p>

45</body>

46</html>