`

js 级联下拉框的生成

阅读更多
最近做页面时,碰到js级联下拉框显示的问题。先用下拉框选择大类,小类选项由大类的选项决定自动生成。我的js 代码如下:
var classidList=[
{'100':'旅游度假','subList':{'100001':'旅游资讯','100002':'旅行预定','100003':'旅行线路','100004':'机票预定','100005':'酒店预订','100006':'旅行社','100007':'热门景点','100008':'交通地图','100009':'天气','100010':'旅游门户'}},
{'101':'医疗健康','subList':{'101001':'健康资讯','101002':'医疗','101003':'保健','101004':'两性健康','101005':'心理健康','101006':'医学','101007':'医药','101008':'医院','101009':'健康门户'}},
{'102':'教育招聘','subList':{'102001':'教育资讯','102002':'人才招聘','102003':'论文','102004':'课件','102005':'学习/培训','102006':'留学','102007':'外语','102008':'同学录','102009':'大学','102010':'网校','102011':'考试','102012':'教育门户'}},{'103':'消费购物','subList':{'103001':'消费资讯','103002':'购物','103003':'美食','103004':'时尚','103005':'摄影','103006':'美容','103007':'鞋帽','103008':'服装服饰','103009':'男士','103010':'女性','103011':'育儿','103012':'行业网站'}},
{'104':'网络服务','subList':{'104001':'搜索','104002':'垂直搜索','104003':'P2P','104004':'软件下载','104005':'在线翻译','104006':'网站导航','104007':'免费主页','104008':'桌面媒体','104009':'网络硬盘','104010':'网络电话'}},
{'105':'社区交友','subList':{'105001':'聊天','105002':'论坛','105003':'播客','105004':'社区','105005':'博客','105006':'综合交友','105007':'婚恋交友','105008':'商务交友','105009':'维客'}},
{'106':'娱乐休闲','subList':{'106001':'游戏','106002':'影视','106003':'音乐','106004':'动漫','106005':'明星','106006':'宠物','106007':'贺卡','106008':'视频','106009':'爱情','106010':'图片','106011':'星座','106012':'笑话幽默','106013':'娱乐门户'}},
{'107':'新闻门户','subList':{'107001':'综合门户','107002':'新闻门户','107003':'地方信息港','107004':'政府公务','107005':'电视','107006':'广播电台','107007':'报刊'}},
{'108':'IT数码','subList':{'108001':'IT资讯','108002':'电脑教程','108003':'硬件','108004':'软件','108005':'电脑考试','108006':'数码','108007':'程序设计','108008':'笔记本','108009':'LINUX','108010':'站长资源','108011':'IT门户'}},
{'109':'体育运动','subList':{'109001':'奥运','109002':'足球','109003':'篮球','109004':'排球','109005':'乒乓球','109006':'网球','109007':'体育报刊','109008':'棋牌','109009':'游泳','109010':'羽毛球','109011':'户外','109012':'赛车F1','109013':'体育门户'}},
{'110':'文化艺术','subList':{'110001':'文学','110002':'艺术','110003':'历史','110004':'军事','110005':'社科','110006':'名人'}},
{'111':'财经法律','subList':{'111001':'证券','111002':'彩票','111003':'银行','111004':'汽车','111005':'房产','111006':'保险','111007':'商业','111008':'理财','111009':'广告','111010':'会计','111011':'法律','111012':'财经门户'}}
];

//设置小类所对应的Map值;
function setSubClass(province)
{	var subClassMap;
	for(i=0;i<classidList.length;i++){
		var classMap = classidList[i];
		for(var prop in classMap){
			if(prop==province){
			subClassMap=classMap['subList'];
			}
		}
	}
	setSelectOption('site_sub_class', subClassMap, '-请选择小类-');
}
//根据大类的改变,相应小类进行初始化。
function setSelectOption(selectObj, optionList, firstOption, selected)
{
	if (typeof selectObj != 'object')
	{
		selectObj = document.getElementById(selectObj);
	}
	removeOptions(selectObj);
	var start = 0;
	if (firstOption)
	{
		selectObj.options[0] = new Option(firstOption, '');
		start ++;
	}
	for(var prop in optionList){
		selectObj.options[start] = new Option(optionList[prop], prop);
		if(selected == prop)
		{
			selectObj.options[start].selected = true;
		}
		start ++;
	}
}
//清除子类选项
function removeOptions(selectObj)
{
	if (typeof selectObj != 'object')
	{
		selectObj = document.getElementById(selectObj);
	}
	var len = selectObj.options.length;
	for (var i=0; i < len; i++)
	{
		selectObj.options[0] = null;
	}
}

//初始化
var mainClassid = document.getElementById('site_main_class');
//读取大类并添加到大类选择中
for(iter=0;iter<classidList.length;iter++)
{
	var classMap = classidList[iter];
	for(var prop in classMap){
		if(prop!='subList'){
		mainClassid.options.add(new Option(classMap[prop],prop));
		}
	}
}


在解决这个问题时主要是怎么组织这个数据结构,我是利用了js 的Map 来进行迭代。从而解决了这个问题的。

分享到:
评论

相关推荐

    js+xml生成级联下拉框代码.docx

    js+xml生成级联下拉框代码.docx

    js+xml生成级联下拉框代码

    js+xml生成级联下拉框代码,需要的朋友可以参考下

    Jquery 实例:Ajax级联下拉框效果

    这是一个利用了Ajax技术的一个Jquery实例,动态的生成级联的下拉列表框,在中关村zol中经常可以看到。如果遇到无法显示的情况,请自己阅读代码。

    风越asp代码生成器 V3.5

    10、支持自动生成多组多级的级联下拉框功能,快速建立如:省、市、县/公司、部门、小组等形式下拉框 ★ 11、支持表单提交超过100KB的文本数据 ★ 12、支持多文件上载、修改、删除记录时同步删除文件 13、支持控件名...

    风越.net代码生成器 v3.5

    10、支持自动生成多组多级的级联下拉框功能,快速建立如:省、市、县/公司、部门、小组等形式下拉框 ★ 11、支持表单提交超过100KB的文本数据 ★ 12、支持多文件上载、修改、删除记录时同步删除文件 13、支持控件名...

    风越.Net代码生成器 [FireCode Creator] V1.3 精简版

    10、支持自动生成多组多级的级联下拉框功能,快速建立如:省、市、县/公司、部门、小组等形式下拉框 ★ 11、支持表单提交超过100KB的文本数据 ★ 12、支持多文件上载、修改、删除记录时同步删除文件 13、支持控件名...

    风越ASP代码生成器 试用版

     6、支持自动生成多组多级的级联下拉框功能,快速建立如:省、市、县的多级选项 ★  7、支持表单提交超过100KB的文本数据,支持文件上载  8、支持输入控件名加密功能,防止他人从客户端HTML中猜解数据字段名 ★ ...

    bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例

    bootstrap-table插件:bootstrap-editable,可编辑下拉框,以及代码实例,

    风越ASP代码生成器 [FireAsp Creator]

    ★  5、支持对用户输入内容进行服务器端与客户端JS双重验证 ★  6、支持自动生成多组多级的级联下拉框功能,快速建立如:省、市、县的多级选项 ★  7、支持表单提交超过100KB的文本数据,支持文件上载...

    风越ASP代码生成器FireAspCreatorv2.9.rar

    10、支持自动生成多组多级的级联下拉框功能,快速建立如:省、市、县/公司、部门、小组等形式下拉框 ★ 11、支持表单提交超过100KB的文本数据 ★ 12、支持多文件上载、修改、删除记录时同步删除文件 13、支持控件名...

    风越ASP代码生成器2.8

    10、支持自动生成多组多级的级联下拉框功能,快速建立如:省、市、县/公司、部门、小组等形式下拉框 ★ 11、支持表单提交超过100KB的文本数据 ★ 12、支持多文件上载、修改、删除记录时同步删除文件 13、支持控件名...

    风越ASP代码生成器 2.4

    10、支持自动生成多组多级的级联下拉框功能,快速建立如:省、市、县/公司、部门、小组等形式下拉框 ★ 11、支持表单提交超过100KB的文本数据 ★ 12、支持多文件上载、修改、删除记录时同步删除文件 13、支持控件名...

    jQuery实现动态生成年月日级联下拉列表示例

    本文实例讲述了jQuery实现动态生成年月日级联下拉列表。分享给大家供大家参考,具体如下: html代码: &lt;form name="form1" id="dateForm"&gt; &lt;select name="year"&gt;&lt;/select&gt;年 &lt;select name=...

    风越.net代码生成器v2.9

    10、支持自动生成多组多级的级联下拉框功能,快速建立如:省、市、县/公司、部门、小组等形式下拉框 ★ 11、支持表单提交超过100KB的文本数据 ★ 12、支持多文件上载、修改、删除记录时同步删除文件 13、支持控件名...

    php+mysql实现的二级联动菜单效果详解

    本文实例讲述了php+mysql实现的二级联动菜单效果。分享给大家供大家参考,具体如下: &lt;!... &lt;... ...生成学院专业级联下拉菜单测试 &lt;...** 功 能: php+mysql+javascript实现学院专业二级级联下拉框 ** 数据

    工作流程引擎.包含大量文档2012813

    基本功能: 图形化流程设计/智能表单web定义免程序开发/级联下拉框/流程轨迹/单据自定义打印/邮件短信工作到达通知/自动任务分配/支持sdk模式开发/简洁集成/消息侦听/丰富事件接口/报表定义/工作量分析/绩效考核/手机...

    驰骋工作流引擎源码

    基本功能: 图形化流程设计/智能表单web定义免程序开发/级联下拉框/流程轨迹/单据自定义打印/邮件短信工作到达通知/自动任务分配/支持sdk模式开发/简洁集成/消息侦听/丰富事件接口/报表定义/工作量分析/绩效考核/手机...

    通过BootStrap-select插件 js jQuery控制select属性变化

    select我想大家都不陌生是一个前端下拉框的插件非常好用,在select的标签中设置属性可以做很多功能控制,不过初始化之后怎么去修改网上找遍中文英文也没有一个交代自己研究好久研究出来了,当然有的人会干掉重新生成...

    ui-builder:使用小部件快速创建用户界面

    UI生成器UI Builder的目标是仅使用拖放就可以轻松创建相对复杂的用户界面,从而可以与客户端进行快速迭代。 功能包括: 标准控件,例如文本框,下拉菜单,单选按钮带有多个过滤器的表带有嵌入式表达式的文本重复的...

Global site tag (gtag.js) - Google Analytics