Javascript 生成无限下拉列表实现代码

代码如下:

//公司二维数组数据源
Office = [
["Dept", "ParentDept"],
["业务部", "0"],
["技术部", "0"],
["市场部", "0"],
["www.yongfa365.com", "业务部"],
["业务部小杨", "业务部"],
["业务部小菜", "业务部"],
["技术部老柳", "技术部"],
["技术部老杨", "技术部"],
["技术部老菜", "技术部"],
["市场部柳先生", "市场部"],
["市场部杨先生", "市场部"],
["市场部菜鸟", "市场部"]
]

//省市三维数组数据源
City3 = [
["Dept", "ParentId", "Id"],
["北京", "0", "010"],
["山西", "0", "0359"],
["朝阳区", "010", "001"],
["海淀区", "010", "002"],
["豆各庄", "001", "101"],
["十里堡", "001", "102"],
["中关村", "002", "201"],
["上地", "002", "202"],
["运城地区", "0359", "301"],
["太原市", "0359", "302"],
["永济市", "301", "311"],
["小区", "302", "312"]
];

//FillSelectTree("nowhaha", City3, "0", "311", -1)
//Select控件ID,数据源,父级值,选中值,第几级(用来产生分隔符)
function FillSelectTree(SelectId, ArrObj, ParentValue, SelectedValue, NowI) {
StrObj = eval(document.getElementById(SelectId));

NowI++;

//判断它是二级数据源,还是三级
if (ArrObj[0].length == 2)
{ ArrNum = 0; }
else
{ ArrNum = 2; }

//生成所有Option
for (var i = 0; i < ArrObj.length; i++) {
if (ArrObj[i][1] == ParentValue) {
StrObj.options[StrObj.length] = new Option(String("  ", NowI) + ArrObj[i][0], ArrObj[i][ArrNum]);

//选中默认值
if (ArrObj[i][ArrNum] == SelectedValue) {
StrObj.options[StrObj.length - 1].selected = true;
}

//遍历
FillSelectTree(SelectId, ArrObj, ArrObj[i][ArrNum], SelectedValue, NowI);
}
}
}

//复制字符串多少次
function String(str, nowi) {
strtemp = "";
for (var i = 0; i < nowi; i++) {
strtemp += str;
}
return strtemp;
}

//公司二维数组数据源
Office = [
["Dept", "ParentDept"],
["业务部", "0"],
["技术部", "0"],
["市场部", "0"],
["业务部小柳", "业务部"],
["业务部小杨", "业务部"],
["业务部小菜", "业务部"],
["技术部老柳", "技术部"],
["技术部老杨", "技术部"],
["技术部老菜", "技术部"],
["市场部柳先生", "市场部"],
["市场部杨先生", "市场部"],
["市场部菜鸟", "市场部"]
]
//省市三维数组数据源
City3 = [
["Dept", "ParentId", "Id"],
["北京", "0", "010"],
["山西", "0", "0359"],
["朝阳区", "010", "001"],
["海淀区", "010", "002"],
["豆各庄", "001", "101"],
["十里堡", "001", "102"],
["中关村", "002", "201"],
["上地", "002", "202"],
["运城地区", "0359", "301"],
["太原市", "0359", "302"],
["永济市", "301", "311"],
["小区", "302", "312"]
];
//FillSelectTree("nowhaha", City3, "0", "311", -1)
//Select控件ID,数据源,父级值,选中值,第几级(用来产生分隔符)
function FillSelectTree(SelectId, ArrObj, ParentValue, SelectedValue, NowI) {
StrObj = eval(document.getElementById(SelectId));
NowI++;
//判断它是二级数据源,还是三级
if (ArrObj[0].length == 2)
{ ArrNum = 0; }
else
{ ArrNum = 2; }
//生成所有Option
for (var i = 0; i



FillSelectTree("nowhaha", City3, "0", "311", -1)

FillSelectTree("NowOffice", Office, "0", "业务部小柳", -1)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • JavaScript实现下拉列表框数据增加、删除、上下排序的方法

    本文实例讲述了JavaScript实现下拉列表框数据增加.删除.上下排序的方法.分享给大家供大家参考.具体如下: 这里实现在一个支持多选的下拉列表框内进行数据项的添加.删除.向上.向下移动操作,我们在一些人才网站或是编程技术站经常会看到这种功能,比较实用. 运行效果截图如下: 具体代码如下: <title>下拉列表数据上下排序</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function

  • javascript为下拉列表动态添加数据项

    javascript为下拉列表添加数据项.html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>为下拉列表动态添加数据项<

  • javascript 操作select下拉列表框的一点小经验

    按照我一贯的web开发风格,所有不直接操作数据库的事件,都尽可能由javascript来实现,所以这个需求我打算使用js来完成. 首先来分析一下具体情况:这个页面是一个更新页面,品牌有品牌1和品牌2两个字段,品牌2可以为空,品牌1不能为空,所以品牌2的下拉列表框比品牌1多一项:如果选择了品牌的前8相中的任意一项,"活跃状态"要隐藏,否则"活跃状态"默认显示状态为"潜在":当查询的结果品牌1和品牌2有任意一项在品牌的前8相中,"活跃状态&

  • Javascript调用XML制作连动下拉列表框

    传统的HTML页面中连动下拉框采用了两种方法:1)直接将下拉框中的内容hardcode于html的javascript中,调用javascript函数循环写入下拉框中.这种方法不适用于下拉框内容经常改变的情况.因为数据源和javascript程序写死在同一页面. <html><head><title>List</title><meta http-equiv="Content-Type" content="text/html

  • javascript 获取select下拉列表值的代码

    比如,在使用DWR的时候,如果你想传递下拉框的参数到后台的话,此时就需要先获取到下拉框的值了. 其实想要获取到下拉框的值是很简单的. 最关键的一段代码就是: 复制代码 代码如下: onchange="show(this.options[this.options.selectedIndex].value);" onchange="show(this.options[this.options.selectedIndex].value);" show是一个自定义的函数名.

  • javascript实现通过拼音首字母快速选择下拉列表

    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉列表快速选择</title> <script type="text/javascript" language="JavaScript">// 获取拼音首字母function ge

  • JavaScript实现对下拉列表值进行排序的方法

    本文实例讲述了JavaScript实现对下拉列表值进行排序的方法.分享给大家供大家参考.具体如下: function sortList(id) { var obj = document.getElementById("id"); var values = new Array(); for(var i = 0; i < obj.options.length; i++) { values.push(obj.options[i].innerHTML + "--xx--&quo

  • JavaScript XML实现两级级联下拉列表

    1.创建测试XML文件:select.xml 复制代码 代码如下: <?xml version="1.0" encoding="GBK"?> <select> <province id="sx"> 陕西 <city id="xa">西安</city> <city id="bj">宝鸡</city> <city id=&

  • javascript级联下拉列表实例代码(自写)

    Html dom 是指在w3c规范出现之前,各个浏览器支持的一些dom操作. 1,Select对象. 属性 a,selectedIndex:用户选择的选项的下标,下标从0开始 b,length: 获取或者设置选项的个数 c,options: 返回一个数组,数组元素是Option对象 2,Options对象 属性: a,text:选项的文本内容 b,value:选项的値 c,selected: 当该选项被选上,值为true,否则为false 小知识:创建一个Option对象 复制代码 代码如下:

  • javaScript年份下拉列表框内容为当前年份及前后50年

    javascript下拉列表框,内容为当前年份及前后50年,默认选择为当前年份 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.onload=function(){ //设置年份的选择 var myDate= new Date(); var startYear=myDate.getFullYear()-50;//起始年份 var endYear=myDate.

随机推荐