- 浏览: 427895 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
fred7510:
死的啊。。不过还是谢了
flex 截图 -
hechuanshan:
flex状态及动画 -
Da嗒_Sunny:
求使用说明
flex图片裁剪 -
wapj23:
...
flex中定制右键菜单 -
lion_leon:
谢谢!帮了我的大忙了!
利用flashvars给flash传值
效果地址:
http://search1.taobao.com/browse/ad_search.htm
具体代码见: 附件1
其中关键代码解析:
一、构造类别数组
声明一个类别数组cat
cats['11']=['电脑硬件/台式整机/网络设备','1']; cats['110502']=['品牌液晶显示器','11']; cats['110202']=['内存','11'];
5000多个略…,规则为:
数组的下标是类别id,
第一个元素为类别名
第二个元素为类别父id
接下来构一个将cats数组存入一个parent数组,数组的下标为cats数组的父id,元素为类别数组本身:
for (c in cats) { var ii = cats[c][1]; if (!parent[ii]) { parent[ii] = new Array(); } parent[ii][parent[ii].length] = c; }
这样,形成如下图的两个类别数组:
二、填充下拉框方法
利用cats 和parent两个数组填充,主要是得到了选中的某个类别的子类别集合:
/* id:选中的类别id obj:下拉列表框dom对象 defaultId: 如果要选中默认的某个子,则传递此参数 isFirst:为了可以连级初始化所用。 */ function _addList(id, obj, defaultId, isFirst) { if (!defaultId) { defaultId = -1; } var s = 0; if (haveBlank == 'true') { obj.options[s++] = new Option('', ''); } if (parent[id]) { //利用上面的数组关系直接得到了子数组 for (var i = 0; i < parent[id].length; ++i) { var catId = parent[id][i];//某个子的id if (!parent[catId]) { obj.options[s++] = new Option(cats[catId][0], catId); }else { obj.options[s++] = new Option(cats[catId][0] + ' ->', catId); //如果还有子显示一个"->" } if (defaultId >= 0 && defaultId == catId) { obj.options[s-1].selected = true; changeSubCat(obj); }else if (i == 0 && !isFirst && haveBlank == '') { obj.options[i].selected = true; changeSubCat(obj); } } } }
三、填充下拉框的子下拉框
其中做了一些判断是否有子,是否有子下拉框。
function changeSubCat(obj) { if (!obj || !obj.name) { error('obj not found!'); return; } var name = obj.name; var form = document.forms[formName]; if (!form) { error('form not found!'); return; } var selectNum = -1; for (var i = 0; i < catSel.length; ++i) { if (catSel[i] == name) { selectNum = i; break; } } if (selectNum < 0) { debug('can\'t found sub select'); _setValue(); return; } if (selectNum + 1 >= catSel.length || !form.elements[catSel[selectNum + 1]]) { debug('can\'t found sub select 1'); _setValue(); return; } var subSel = form.elements[catSel[selectNum + 1]]; _clearList(subSel); for (var i = selectNum + 1; i < catSel.length; ++i) { if (form.elements[catSel[i]]) { _clearList(form.elements[catSel[i]]); } } if (obj.options[obj.selectedIndex].value == '') { _setValue(); return; } var catId = obj.options[obj.selectedIndex].value; if (!parent[catId]) { debug('no sub select data'); _setValue(); return; } _addList(catId, subSel); _setValue(); }
如上方法可实现了多级下拉框连动,不过有以下问题:
1. 和form绑定死了
2. 在一个页面无法存在多个连动下拉框
3. 下拉框的name不能自定义,
在项目中同样有此需求,需要同时使用多个连动下拉框,同时name也需自定义,稍改进了一下,将各种方法和数组放入类中,同时根据下拉框的id来绑定下拉框,集成了下拉框的onchagne事件
function TreeSelect(){ this.haveBlank=undefined; this.cats=undefined; this.parent=undefined; /** * 初始化数据 */ this.init= function(_cats,_haveBlank,_selid){ this.cats= _cats; this.initParnet(_cats); this.haveBlank=_haveBlank; this.initSelObj(_selid); }; /** * 初始化select对象数组 */ this.initSelObj=function(_selid){ var p = this; function fireChangeEvent(){ p.changeSubCat(event.srcElement); } this.catSel = _selid.split(','); this.sel_ar = new Array(); for(var i=0;i<this.catSel.length;i++){ this.sel_ar[i] = document.getElementById(this.catSel[i]); this.sel_ar[i].attachEvent('onchange',fireChangeEvent,true); } }; /** * 初始化树数据数组 */ this.initParnet=function(cats){ this.parent = new Array(); for (c in cats) { var ii = cats[c][1]; if (!this.parent[ii]) { this.parent[ii] = new Array(); } this.parent[ii][this.parent[ii].length] = c; } }; /** * 清空select列表 */ this._clearList=function(obj) { if (!obj) { return; } for (var i = obj.length - 1; i >= 0; --i) { obj.remove(i); } obj.value = ''; } ; /** * 改变子的选择 */ this.changeSubCat=function(obj) { if (!obj || !obj.id) { error('obj not found!'); return; } var name = obj.id; var selectNum = -1; for (var i = 0; i < this.catSel.length; ++i) { if (this.catSel[i] == name) { selectNum = i; break; } } if (selectNum < 0) { debug('can\'t found sub select'); return; } if (selectNum + 1 >= this.catSel.length || !document.getElementById( this.catSel[selectNum + 1] )) { debug('can\'t found sub select 1'); return; } var subSel = document.getElementById(this.catSel[selectNum + 1]); this._clearList(subSel); for (var i = selectNum + 1; i < this.catSel.length; ++i) { if (document.getElementById([this.catSel[i]])) { this._clearList(document.getElementById(this.catSel[i])); } } var catId = obj.options[obj.selectedIndex].value; if (!this.parent[catId]) { debug('no sub select data'); return; } this._addList(catId, subSel); }; /** * 填充一个select */ this._addList=function(id, obj, defaultId, isFirst) { if (!defaultId) { defaultId = -1; } var s = 0; if (this.haveBlank == 'true') { obj.options[s++] = new Option('请选择', ''); } if (this.parent[id]) {//当前选中的子数组 for (var i = 0; i < this.parent[id].length; ++i) { var catId = this.parent[id][i]; if (!this.parent[catId]) { obj.options[s++] = new Option(this.cats[catId][0], catId); }else { obj.options[s++] = new Option(this.cats[catId][0] + ' ->', catId); } if (defaultId >= 0 && defaultId == catId) { obj.options[s-1].selected = true; this.changeSubCat(obj); }else if (i == 0 && !isFirst && this.haveBlank == '') { obj.options[i].selected = true; this.changeSubCat(obj); } } } }; } function debug(info) { //alert(info); } function error(info) { alert(info); }
详见: 附件2
实际项目中需要和数据库结合起来,通过标签输出,下面附件内容供大家参考:
发表评论
-
一个跨平台的DOMContentLoaded的解决方案
2009-03-26 17:22 1720一个跨平台的DOMContentLoaded的解决方案 ... -
遍历某个dom下的子节点
2009-03-24 16:22 2889var wrap = document.getElementB ... -
Extjs Combo连动
2009-03-16 17:29 4509lcombo.html <!DOCTYPE HTML ... -
利用AJAX取头部信息
2009-03-16 10:14 1160//取所有头部信息 xmlhttp.getAllRespons ... -
Extjs的Ajax Request源码流程分析
2009-03-12 10:29 1221图片太大,不让提交,只能使用链接了。 http://king ... -
http status 一览
2009-03-11 17:09 1085<PRE class=java name=&qu ... -
html5参考手册
2009-02-25 14:05 1523原文:http://www.w3school.com.cn ... -
分析yui结合flash的上传组件
2009-02-13 12:44 1991yui上传组件: http://developer.yahoo ... -
利用jsdt调试js
2008-12-18 16:36 22251、下载eclipse的插件,见附件 2、将plugin下的三 ... -
EXT Menu改变Menu的Layer class之后菜单功能失败的解决办法
2008-11-14 11:32 1529ext2中可以改变 Menu的class ,比如不想要前面的竖 ... -
ie的userdata 和 firefox的sessionStorage
2008-11-10 10:38 2493保存客户端数据,ie用userdata firefox用se ... -
js复制,兼容firefox和ie
2008-10-17 14:55 3122setClipboard: function(data, va ... -
解决ie中js生成的图片不显示的问题
2008-09-05 13:09 2164问题:js生成的dialog,而图片却不显示,如:var bu ... -
如何去除点击链接时出现的虚线框
2008-09-01 10:20 1639有时候在一个页面用到收放功能的时候时,总有一个虚线框在触发收放 ... -
转存附件用
2008-08-31 19:02 0test -
slice、pop的神奇用法
2008-08-29 14:45 1446slice 要取得一个数组或一个字串的某段时,那就用slice ... -
void(0)的作用
2008-08-26 14:48 1347经常见<a href="javascript: ... -
web前端结构与行为的分离
2008-08-05 17:53 1119web前端结构与行为的分 ... -
解决aptana代码不提示的问题
2008-08-05 11:47 4723都说aptana的代码提示功能很好,可是我的安装上之后怎么也不 ... -
aptana1.x破解
2008-08-05 11:03 1391package com.aptana.ide.core.lic ...
相关推荐
javascript多级下拉菜单插件 javascript多级下拉菜单插件 javascript多级下拉菜单插件 javascript多级下拉菜单插件 javascript多级下拉菜单插件
JavaScript 自定义多级联动下拉菜单
使用Java JSP JavaScript实现多级下拉菜单.pdf
JavaScript解析XML实现多级级联下拉列表
可以放到项目中用 mutiselect 下拉多选插件 可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo
JavaScript 自定义多级联动浮动菜单!JavaScript 自定义多级联动浮动菜单!JavaScript 自定义多级联动浮动菜单!JavaScript 自定义多级联动浮动菜单!源码下载!
js javascript 多级下拉列表联动 正则表达式
主要介绍了javascript实现多级联动下拉菜单的方法,通过javascript自定义函数实现对多级联动下拉菜单的操作,是非常实用的技巧,需要的朋友可以参考下
JavaScript实现多级关联选择地址JavaScript实现多级关联选择地址JavaScript实现多级关联选择地址JavaScript实现多级关联选择地址JavaScript实现多级关联选择地址JavaScript实现多级关联选择地址JavaScript实现多级...
多级联动,支持Ajax动态获取数据并缓存数据,动态生成下级select菜单,设置动态生成"option"第一个条目作为提示项,自动选择唯一选项的菜单,设置回调函数在onChange事件触发时获取下拉菜单相关信息。 详细功能及...
用Javascript实现日期下拉菜单,可以修改日期的范围等。
css和javascript编写的 横向下拉菜单,有益于学习网页制作
NULL 博文链接:https://heisetoufa.iteye.com/blog/353661
javascript实现多级静态树例子
javascript+css 下拉菜单javascript+css 下拉菜单
JavaScript做的下拉菜单,可以用来做网站首页