SELECT联动
下面是一个理论可以支持无限级SELECT的联动代码。并可方便的扩展成基于AJAX方式加载数据.下面是完整代码
var where = new Array();
//parentId与id值关联,当为0时,为顶级数据
where.push({id: 1, name:'北京', parentId:0});
where.push({id: 5, name:'广东', parentId:0});
where.push({id: 2, name:'东城', parentId:1});
where.push({id: 3, name:'大街', parentId:2});
where.push({id: 4, name:'西城', parentId:1});
//查找相应的数据
function funcFindChildData(pid){
var childData = new Array();
for( var i = 0; i < where.length; i++){
if( where[i].parentId == pid){
childData.push(where[i]);
}
}
return childData;
}
//两个SELECT联动,p为触发事件的SELECT, c为被更改的SELECT
function select(p,c) {
var loca2;
with(p) { loca2 = options[selectedIndex].value; }
var list = funcFindChildData(loca2);
funcFillSelect(c, list);
}
//将arr数据填充到sel中
function funcFillSelect(sel, arr){
sel.options[0].selected = true;
sel.length = arr.length + 1;
sel.options[0].text = "请选择";
sel.options[0].value = "";
for(j = 0;j < arr.length;j++) {
with(sel) {
options[j+1].text = arr[j].name;
options[j+1].value = arr[j].id;
}
}
if( sel.onchange ) sel.onchange();
}
function funcInit(sels){
for( var i = 0; i < sels.length; i++){
with(sels[i]){
length = 1;
options[0].text = "请选择";
options[0].value = "";
if( i < sels.length - 1){
onchange = new Function ("select("+sels[i].id+","+sels[i + 1].id+");");
}
}
}
var list = funcFindChildData(0);
funcFillSelect(sels[0], list);
}
调用示例:
<select id="c"></select><select id="p"></select><select id="ci"></select> <script> funcInit([c, p, ci]); </script>
Tag标签: 控件 JS
- 1. 利用Javascript获得和设置FCKeditor值2010-02-22
- 2. FF下提示Node cannot be inserted2010-02-03
- 3. SELECT联动2009-11-13
- 4. Javascript获取某个url参数[收藏]2009-07-13
- 5. 实现回车触发事件后不引起其它事件2009-07-07





