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
发表于 2009-11-13 22:45:45 收藏 所属分类: Javascript 网摘收藏
相关文章: