找了几天终于找到一个无限联动下拉框的代码,并且可以赋初始值,非常满意
2008-01-27 11:09
537 查看
有三个文件:sort.js,sortArr.js,test.htm。
sortArr.js就是所需要的数据:
var arrSorts = new Array(35);
arrSorts[0] = ["1", "主类别一", "0"];
arrSorts[1] = ["2", "主类别二", "0"];
arrSorts[2] = ["3", "主类别三", "0"];
arrSorts[3] = ["4", "小类一", "1"];
arrSorts[4] = ["5", "小类二", "1"];
arrSorts[5] = ["6", "小类三", "1"];
arrSorts[6] = ["7", "细类一", "4"];
arrSorts[7] = ["8", "细类二", "4"];
arrSorts[8] = ["9", "细类三", "4"];
arrSorts[9] = ["10", "小类四", "2"];
arrSorts[10] = ["11", "小类五", "2"];
arrSorts[11] = ["12", "小类六", "2"];
arrSorts[12] = ["13", "细类四", "5"];
arrSorts[13] = ["14", "细类五", "5"];
arrSorts[14] = ["15", "末类一", "7"];
arrSorts[15] = ["16", "末类二", "7"];
arrSorts[16] = ["17", "末类三", "7"];
arrSorts[17] = ["18", "终极类一", "15"];
arrSorts[18] = ["19", "终极类二", "15"];
arrSorts[19] = ["20", "终极类三", "15"];
arrSorts[20] = ["21", "终极类四", "16"];
arrSorts[21] = ["22", "终极类五", "16"];
arrSorts[22] = ["23", "终极类六", "16"];
arrSorts[23] = ["24", "末类四", "8"];
arrSorts[24] = ["25", "末类五", "8"];
arrSorts[25] = ["26", "末类六", "8"];
arrSorts[26] = ["27", "末类七", "9"];
arrSorts[27] = ["28", "末类八", "9"];
arrSorts[28] = ["29", "末类九", "9"];
arrSorts[29] = ["30", "终极类七", "17"];
arrSorts[30] = ["31", "终极类八", "17"];
arrSorts[31] = ["32", "终极类九", "17"];
arrSorts[32] = ["33", "终极类十", "24"];
arrSorts[33] = ["34", "终极类十一", "24"];
arrSorts[34] = ["35", "终极类十二", "24"];
arrSorts[35] = ["36", "终极类十三", "24"];
sort.js就是主要部分了,我写成了类的形式。
/**
* 无限级联动选择菜单类
* _storeValueObjName:存放选择项值的页面元素名称
* _showSelectObjName:显示该菜单的页面元素名称
* _sortArr:显示菜单所需的数组,格式如下
* arrSorts[0] = ["类别ID1", "类别一", "父类ID1"];
* arrSorts[1] = ["类别ID2", "类别二", "父类ID2"];
*
* @author zxub 2005-8-23
*/
function sortMenu(_storeValueObjName, _showSelectObjName, _sortArr)
{
this.storeValueObj=document.getElementById(_storeValueObjName);
this.showSelectObj=document.getElementById(_showSelectObjName);
this.sortArr=_sortArr;
/**
* 获取第一层分类,并显示在showSelectObj中
* _sortMenuObj:sortMenu的实例对象,指向自己
*/
this.initSorts=function(_sortMenuObj)
{
this.storeValueObj.value=0;
_select=document.createElement("select");
this.showSelectObj.insertAdjacentElement("afterBegin",_select);
_select.sortMenuObj=_sortMenuObj;
_select.onchange=function()
{
this.sortMenuObj.setSorts(this,this.sortMenuObj);
}
_select.add(new Option("请选择...",""));
for (var i = 0; i < this.sortArr.length; i++)
{
if (this.sortArr[i][2] == 0)
{
_select.add(new Option(this.sortArr[i][1],this.sortArr[i][0]));
}
}
}
/**
* 下拉框联动
* _curSelect:当前选择的下拉框
* _sortMenuObj:sortMenu的实例对象,指向自己
*/
this.setSorts=function(_curSelect,_sortMenuObj)
{
//若当前下拉框后面还有下拉框,即有下级下拉框时,清除下级下拉框,在后面会重新生成下级部分
//下级下拉框与当前下拉框由于都是显示在showSelectObj中,故它们是兄弟关系,所以用nextSibling获取
while (_curSelect.nextSibling)
{
_curSelect.parentNode.removeChild(_curSelect.nextSibling);
}
//获取当前选项的值
_iValue = _curSelect.options[_curSelect.selectedIndex].value;
//如果选择的是下拉框第一项(第一项的值为"")
if (_iValue == "")
{
//若存在上级下拉框
if (_curSelect.previousSibling)
{
//取值为上级下拉框选中值
this.storeValueObj.value = _curSelect.previousSibling.options[_curSelect.previousSibling.selectedIndex].value;
}
else
{
//没上级则取值为0
this.storeValueObj.value = 0;
}
//选择第一项(请选择...),没有下级选项,所以要返回
return false;
}
//选择的不是第一项
this.storeValueObj.value = _iValue;
//去掉当前下拉框原来的选择状态
//将选中的选项对应代码更改为 selected
for (i=0;i<_curSelect.options.length;i++)
{
if (_curSelect.options[i].selected=="selected")
{
_curSelect.options[i].removeAttribute("selected");
}
if (_curSelect.options[i].value==_iValue)
{
_curSelect.options[i].selected="selected";
}
}
//新生成的下级下拉列表
_hasChild=false;
for (var i = 0; i < this.sortArr.length; i++)
{
if (this.sortArr[i][2] == _iValue)
{
if (_hasChild==false)
{
_siblingSelect=document.createElement("select");
this.showSelectObj.insertAdjacentElement("beforeEnd",_siblingSelect);
_siblingSelect.sortMenuObj=_sortMenuObj;
_siblingSelect.onchange=function()
{
this.sortMenuObj.setSorts(this,this.sortMenuObj);
}
_siblingSelect.add(new Option("请选择...",""));
_siblingSelect.add(new Option(this.sortArr[i][1],this.sortArr[i][0]));
_hasChild=true;
}
else
{
_siblingSelect.add(new Option(this.sortArr[i][1],this.sortArr[i][0]));
}
}
}
}
/**
* 根据最小类选取值生成整个联动菜单,由后往前递归完成
* _minCataValue:最小类的取值
* _sortMenuObj:sortMenu的实例对象,指向自己
*/
this.newInit=function(_minCataValue,_sortMenuObj)
{
if (this.storeValueObj.value=="undefined" || this.storeValueObj.value=="")
{
this.storeValueObj.value=_minCataValue;
}
if (_minCataValue == 0)
{
//minCataValue为0,也就是初始化了
this.initSorts(_sortMenuObj);
//初始化完成后,退出函数
return false;
}
//父级ID
_parentID=null;
_select=document.createElement("select");
_select.sortMenuObj=_sortMenuObj;
_select.onchange=function()
{
this.sortMenuObj.setSorts(this,this.sortMenuObj);
}
this.showSelectObj.insertAdjacentElement("afterBegin",_select);
_select.add(new Option("请选择...",""));
for (var i = 0; i < this.sortArr.length; i++)
{
if (_minCataValue == this.sortArr[i][0])
{
_parentID = this.sortArr[i][2];
break;
}
}
for (var i = 0; i < this.sortArr.length; i++)
{
if (this.sortArr[i][2] == _parentID)
{
if (this.sortArr[i][0] == _minCataValue)
{
_opt=new Option(this.sortArr[i][1],this.sortArr[i][0]);
_select.add(_opt);
_opt.selected="selected";
}
else
{
_select.add(new Option(this.sortArr[i][1],this.sortArr[i][0]));
}
}
}
if (_parentID > 0)
{
this.newInit(_parentID,_sortMenuObj);
}
}
}
最后是测试用页面test.htm的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript" src="sortArr.js"></script>
<script language="javascript" src="sort.js"></script>
</HEAD>
<BODY>
<P id=abc> </P><INPUT id=txtSortID name=txtSortID>
<P id=selBox> </P><INPUT id=SortID name=SortID>
<script language="javascript">
var a=new sortMenu("txtSortID","abc",arrSorts);
a.newInit(0,a);
var b=new sortMenu("SortID","selBox",arrSorts);
b.newInit(36,b);
</script>
<script>
function check_1(){
if (document.getElementById('selBox').lastChild.selectedIndex==0){
alert('还有子类没选择!')
}
else{
alert("顺利通过");
}
}
</script>
<INPUT TYPE="button" value="test" onClick="check_1()">
</BODY>
</HTML>
sortArr.js就是所需要的数据:
var arrSorts = new Array(35);
arrSorts[0] = ["1", "主类别一", "0"];
arrSorts[1] = ["2", "主类别二", "0"];
arrSorts[2] = ["3", "主类别三", "0"];
arrSorts[3] = ["4", "小类一", "1"];
arrSorts[4] = ["5", "小类二", "1"];
arrSorts[5] = ["6", "小类三", "1"];
arrSorts[6] = ["7", "细类一", "4"];
arrSorts[7] = ["8", "细类二", "4"];
arrSorts[8] = ["9", "细类三", "4"];
arrSorts[9] = ["10", "小类四", "2"];
arrSorts[10] = ["11", "小类五", "2"];
arrSorts[11] = ["12", "小类六", "2"];
arrSorts[12] = ["13", "细类四", "5"];
arrSorts[13] = ["14", "细类五", "5"];
arrSorts[14] = ["15", "末类一", "7"];
arrSorts[15] = ["16", "末类二", "7"];
arrSorts[16] = ["17", "末类三", "7"];
arrSorts[17] = ["18", "终极类一", "15"];
arrSorts[18] = ["19", "终极类二", "15"];
arrSorts[19] = ["20", "终极类三", "15"];
arrSorts[20] = ["21", "终极类四", "16"];
arrSorts[21] = ["22", "终极类五", "16"];
arrSorts[22] = ["23", "终极类六", "16"];
arrSorts[23] = ["24", "末类四", "8"];
arrSorts[24] = ["25", "末类五", "8"];
arrSorts[25] = ["26", "末类六", "8"];
arrSorts[26] = ["27", "末类七", "9"];
arrSorts[27] = ["28", "末类八", "9"];
arrSorts[28] = ["29", "末类九", "9"];
arrSorts[29] = ["30", "终极类七", "17"];
arrSorts[30] = ["31", "终极类八", "17"];
arrSorts[31] = ["32", "终极类九", "17"];
arrSorts[32] = ["33", "终极类十", "24"];
arrSorts[33] = ["34", "终极类十一", "24"];
arrSorts[34] = ["35", "终极类十二", "24"];
arrSorts[35] = ["36", "终极类十三", "24"];
sort.js就是主要部分了,我写成了类的形式。
/**
* 无限级联动选择菜单类
* _storeValueObjName:存放选择项值的页面元素名称
* _showSelectObjName:显示该菜单的页面元素名称
* _sortArr:显示菜单所需的数组,格式如下
* arrSorts[0] = ["类别ID1", "类别一", "父类ID1"];
* arrSorts[1] = ["类别ID2", "类别二", "父类ID2"];
*
* @author zxub 2005-8-23
*/
function sortMenu(_storeValueObjName, _showSelectObjName, _sortArr)
{
this.storeValueObj=document.getElementById(_storeValueObjName);
this.showSelectObj=document.getElementById(_showSelectObjName);
this.sortArr=_sortArr;
/**
* 获取第一层分类,并显示在showSelectObj中
* _sortMenuObj:sortMenu的实例对象,指向自己
*/
this.initSorts=function(_sortMenuObj)
{
this.storeValueObj.value=0;
_select=document.createElement("select");
this.showSelectObj.insertAdjacentElement("afterBegin",_select);
_select.sortMenuObj=_sortMenuObj;
_select.onchange=function()
{
this.sortMenuObj.setSorts(this,this.sortMenuObj);
}
_select.add(new Option("请选择...",""));
for (var i = 0; i < this.sortArr.length; i++)
{
if (this.sortArr[i][2] == 0)
{
_select.add(new Option(this.sortArr[i][1],this.sortArr[i][0]));
}
}
}
/**
* 下拉框联动
* _curSelect:当前选择的下拉框
* _sortMenuObj:sortMenu的实例对象,指向自己
*/
this.setSorts=function(_curSelect,_sortMenuObj)
{
//若当前下拉框后面还有下拉框,即有下级下拉框时,清除下级下拉框,在后面会重新生成下级部分
//下级下拉框与当前下拉框由于都是显示在showSelectObj中,故它们是兄弟关系,所以用nextSibling获取
while (_curSelect.nextSibling)
{
_curSelect.parentNode.removeChild(_curSelect.nextSibling);
}
//获取当前选项的值
_iValue = _curSelect.options[_curSelect.selectedIndex].value;
//如果选择的是下拉框第一项(第一项的值为"")
if (_iValue == "")
{
//若存在上级下拉框
if (_curSelect.previousSibling)
{
//取值为上级下拉框选中值
this.storeValueObj.value = _curSelect.previousSibling.options[_curSelect.previousSibling.selectedIndex].value;
}
else
{
//没上级则取值为0
this.storeValueObj.value = 0;
}
//选择第一项(请选择...),没有下级选项,所以要返回
return false;
}
//选择的不是第一项
this.storeValueObj.value = _iValue;
//去掉当前下拉框原来的选择状态
//将选中的选项对应代码更改为 selected
for (i=0;i<_curSelect.options.length;i++)
{
if (_curSelect.options[i].selected=="selected")
{
_curSelect.options[i].removeAttribute("selected");
}
if (_curSelect.options[i].value==_iValue)
{
_curSelect.options[i].selected="selected";
}
}
//新生成的下级下拉列表
_hasChild=false;
for (var i = 0; i < this.sortArr.length; i++)
{
if (this.sortArr[i][2] == _iValue)
{
if (_hasChild==false)
{
_siblingSelect=document.createElement("select");
this.showSelectObj.insertAdjacentElement("beforeEnd",_siblingSelect);
_siblingSelect.sortMenuObj=_sortMenuObj;
_siblingSelect.onchange=function()
{
this.sortMenuObj.setSorts(this,this.sortMenuObj);
}
_siblingSelect.add(new Option("请选择...",""));
_siblingSelect.add(new Option(this.sortArr[i][1],this.sortArr[i][0]));
_hasChild=true;
}
else
{
_siblingSelect.add(new Option(this.sortArr[i][1],this.sortArr[i][0]));
}
}
}
}
/**
* 根据最小类选取值生成整个联动菜单,由后往前递归完成
* _minCataValue:最小类的取值
* _sortMenuObj:sortMenu的实例对象,指向自己
*/
this.newInit=function(_minCataValue,_sortMenuObj)
{
if (this.storeValueObj.value=="undefined" || this.storeValueObj.value=="")
{
this.storeValueObj.value=_minCataValue;
}
if (_minCataValue == 0)
{
//minCataValue为0,也就是初始化了
this.initSorts(_sortMenuObj);
//初始化完成后,退出函数
return false;
}
//父级ID
_parentID=null;
_select=document.createElement("select");
_select.sortMenuObj=_sortMenuObj;
_select.onchange=function()
{
this.sortMenuObj.setSorts(this,this.sortMenuObj);
}
this.showSelectObj.insertAdjacentElement("afterBegin",_select);
_select.add(new Option("请选择...",""));
for (var i = 0; i < this.sortArr.length; i++)
{
if (_minCataValue == this.sortArr[i][0])
{
_parentID = this.sortArr[i][2];
break;
}
}
for (var i = 0; i < this.sortArr.length; i++)
{
if (this.sortArr[i][2] == _parentID)
{
if (this.sortArr[i][0] == _minCataValue)
{
_opt=new Option(this.sortArr[i][1],this.sortArr[i][0]);
_select.add(_opt);
_opt.selected="selected";
}
else
{
_select.add(new Option(this.sortArr[i][1],this.sortArr[i][0]));
}
}
}
if (_parentID > 0)
{
this.newInit(_parentID,_sortMenuObj);
}
}
}
最后是测试用页面test.htm的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript" src="sortArr.js"></script>
<script language="javascript" src="sort.js"></script>
</HEAD>
<BODY>
<P id=abc> </P><INPUT id=txtSortID name=txtSortID>
<P id=selBox> </P><INPUT id=SortID name=SortID>
<script language="javascript">
var a=new sortMenu("txtSortID","abc",arrSorts);
a.newInit(0,a);
var b=new sortMenu("SortID","selBox",arrSorts);
b.newInit(36,b);
</script>
<script>
function check_1(){
if (document.getElementById('selBox').lastChild.selectedIndex==0){
alert('还有子类没选择!')
}
else{
alert("顺利通过");
}
}
</script>
<INPUT TYPE="button" value="test" onClick="check_1()">
</BODY>
</HTML>
相关文章推荐
- 终于找到了一个地方可以自由发布我的引擎了
- 哈哈,昨天晚上终于找到了一个可以用的英文版Visual Studio .Net 2003
- 突然想要做个新闻内容的分页,网上查了下资料,找到了一个可以用的类(代码需要自己研究下,我已经试验成功了)
- 菜鸟蹒跚学ASP-转帖一个HTA的代码,终于找到VBS和JS的UI了。
- 终于找到一个不用注册的HDD Regenerator了,并且用他修复了我的一个分区的物理坏道,共享给大家。
- 手机网页在弹出输入法时候挡住输入框?网上找了很多很多 终于找到一个真真可以用的了~
- 脚本演示的天堂:共享一个可以提供代码示例和运行结果的非常不错的网站
- 终于找到一个在IE8下可以使用搜索栏的输入法了
- 结对编程就是两个人用同一个设计、同一个算法以及同一段代码,并且两人的角色可以随时互换;
- 脚本演示的天堂:共享一个可以提供代码示例和运行结果的非常不错的网站
- 在看官方的例子时候由一个grid实例,在每一行之前有个加号,展开可以显示内容,在实际应用中还是非常有用的,照搬例子的代码,发现老是提示对象不存在,查阅资料后发现是没有加载插件,这里和大家分享下Ext.grid.RowExpander插件的使用,
- 使用HorizontalListView完成一个可拉动刷新的横向listview并且初始可以定位的
- js实现二级联动,并且可以设置任意初始省、市
- 终于找到一个还算满意的blog来安家了
- 终于找到一个可以直接将html转换为jade的网页了!!
- YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化。
- 终于找到一个方法可以使用EF的时候动态指定数据库路径了
- Asp.netUpload(大文件上传) 终于找到一个可以用的了
- 终于找到一个满意的技术博客服务
- implementors一个eclipse面向接口编程的非常有用的插件:可以直接跳到接口的实现代码