代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>封装的Map</title> <mce:script type="text/javascript"><!-- function Map(){ var arr = []; this.add = function(key, value){ var tmp = new Entry(key, value); arr.push(tmp); } function Entry(key, value){ this.key = key; this.value = value; } this.get = function(key){ var obj; for (var i = 0; i < arr.length; i += 1) { if (key == arr[i].key) { obj = arr[i].value; break; } } return obj; } this.getKeySet = function(){ var keyarr = []; for (var i = 0; i < arr.length; i += 1) { keyarr.push(arr[i].key); } return keyarr; } this.getFirstKey = function(){ var obj; if (arr.length > 0) { obj = arr[0].key; } return obj; } } function init(fid, sid){ var map = getMap(); var keys = map.getKeySet(); var fselect = getSelect(keys); addSelectOnchange(); document.getElementById(fid).appendChild(fselect); var sselect = getSelect(map.get(map.getFirstKey())); var sdiv = document.getElementById(sid); sdiv.appendChild(sselect); function addSelectOnchange(){ fselect.onchange = function(){ var node = sdiv.firstChild; while (node.nextSibling) { node = node.nextSibling; sdiv.removeChild(node); } //------- var option = fselect.options[fselect.selectedIndex]; sselect = getSelect(map.get(option.text)); sdiv.appendChild(sselect); } } } function getMap(){ var map = new Map(); map.add("浙江", ['1', '2']); map.add("江苏", ['3', '4']); return map; } function getSelect(keys){ var select = document.createElement("select"); var option; for (var i = 0; i < keys.length; i += 1) { option = document.createElement("option"); option.text = keys[i]; try { select.add(option, i);//ie支持在option位置 } catch (e) { select.add(option, null);//firfox支持option 对象 } } return select; } // --></mce:script> </head> <body onload="init('fdiv','sdiv')"> <div id="fdiv"> </div> <div id="sdiv"> </div> </body> 效果很简单,我相信许多人也可以写出来,但是这个与一般的代码最大的不同在于它的可扩展性很强大!