N级联动菜单实现
关于联动N级联动菜单实现原理：
1:? 链表原理
2：js对象的封装
具体实现代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>N级联动菜单</title> </head> <body> <select name="province" id="province" onchange="sb.nextadd(this)"> </select> <select name="city" id="city" onchange="sb.nextadd(this)"> </select> <select name="county" id="county"> </select> <script language="JavaScript" src="SelectBuilder.js"> </script> <script type="text/javascript"> var citys = [{ code: "A001", lable: "河南省", fcode: "" }, { code: "B001", lable: "郑州市", fcode: "A001" }, { code: "B002", lable: "濮阳市", fcode: "A001" }, { code: "C001", lable: "巩义县", fcode: "B001" }, { code: "C002", lable: "南乐县", fcode: "B002" }, { code: "C003", lable: "濮阳县", fcode: "B002" }, { code: "G001", lable: "河北省", fcode: "" }]; var level = [{ id: "province", value: "A001" }, { id: "city", value: "B001" }, { id: "county", value: "C001" }]; var sb= new SelectBuilder(citys, level); sb.init(); </script> </body></html>SelectBuilder.js代码：//lgd 2010-06-02,N级联动的实现//lgd 2010-06-02,N级联动的实现var defaultOptions = { code: "", lable: "请选择"};var HtmlDomUtil = { createOption: function(value, label){ var _opt = document.createElement("option"); _opt.text = label; _opt.value = value; return _opt; }, getSelectById: function(id){ return document.getElementById(id); }};var SelectBuilder=function(citys, level){ this.citys = citys; this.level = level;}SelectBuilder.prototype = { init: function(){ var firstLevel = this.level[0]; var _select = HtmlDomUtil.getSelectById(firstLevel.id); for (var i = 0; i < this.citys.length; i++) { if (this.citys[i].fcode == "") { var opt = HtmlDomUtil.createOption(this.citys[i].code, this.citys[i].lable); //ie ff通用的方法 _select.options.add(opt); } } this.nextadd(_select); }, nextadd: function(currentyObj){ var _curValue = currentyObj.value; //根据当前的选择的下拉列表框的ID来获取下一个下拉列表框的ID var _nextId = this.getNextSelectId(currentyObj.id); if (_nextId != "") { this.clear(_nextId); } var index = this.getNextSelectIndex(currentyObj.id); for (var i = index + 1; i < this.level.length; i++) { var _nextObj = HtmlDomUtil.getSelectById(this.level[i].id); var _upObj = HtmlDomUtil.getSelectById(this.level[i - 1].id); //defaultOptions var opt = HtmlDomUtil.createOption(defaultOptions.code, defaultOptions.lable); try{ //if ie 执行 _nextObj.add(opt); }catch(e){ //firefox执行 _nextObj.options.add(opt); } for (var k = 0; k < this.citys.length; k++) { if ((this.citys[k].fcode == _upObj.value) && (this.citys[k].fcode) != "") { var _opt = HtmlDomUtil.createOption(this.citys[k].code, this.citys[k].lable); try{ _nextObj.add(_opt); }catch(e){ _nextObj.options.add(_opt); } if (_opt.value == this.level[i].value) { _opt.selected = true; } } } } }, getNextSelectId: function(id){ for (var i = 0; i < this.level.length; i++) { if (this.level[i].id == id) { if (!((i + 1) >= this.level.length)) { return this.level[i + 1].id; } } } return ""; }, getNextSelectIndex: function(id){ for (var i = 0; i < this.level.length; i++) { if (this.level[i].id == id) { return i; } } return -1; }, clear: function(clearId){ var _nextIndex = this.getNextSelectIndex(clearId); for (var i = _nextIndex; i < this.level.length; i++) { var _tmpId = this.level[i].id; var _clearObj = HtmlDomUtil.getSelectById(_tmpId); var _opts = _clearObj.options; for (var k = _opts.length - 1; k > -1; k--) { _clearObj.removeChild(_opts[k]); } } }}?