本代码纯属个人js练手,写着写着,顺便整理。(望哥们姐们手下留砖)
/**
* N级联动v2.0
*
* @说明: 使用json数据格式,生成N级下拉框联运,
* 在初始化联动前,可灵活设置json数据中相对应的id\text\value\parent以及topParent
*
* @author: tips
* @date: 2009-09-07
* @lastupdate: 2010-04-14
* @调用: SelectN(数组, '下拉框id1', '下拉框id2', ...'第N个..ID');
* @注意: 级数N<=254
* setProperties只能在其它初始化级联效果之前运行,否则将有可能出现异常
*
* 数据格式为: [{id:'cn', text:'中国', parent:'-'}, ...]
*
* 若需要设定其它键为id\text\parent,则使用SelectN.setProperties(json);
* 例:SelectN.setProperties({idKey: 'ucode', textKey:'uname', textKey:'uname', parentKey:'fatherCode'});
* 此时解析的数据格式将发生变化:[{ucode: 'aaa', uname: 'bbb', fatherCode:'xxx'}]
*
*/
;(function() {
var myData;
var topParent='-';
var idKey='id', textKey='text', valueKey=idKey, parentKey='parent';
var SelectN = window.SelectN = function(data) {
myData = data;
var ids = [].slice.call(arguments, 1);//下拉框级数的ID,按级数顺序存入数组selectN
//length-1 => 最后一个下拉框不添加onchange
for(var i=0, len=ids.length-1; i<len; i++){
var o = $(ids[i]);
addEventHandler(o, 'change', (function() {
var self=o, index=i+1;
return function() {
showChild(self, ids, index);
}
})());
}
showChild(null, ids, 0);
return SelectN;
}
/**
* 指定data中的哪一项代表相应的id、text、value、parent等
*
* 设置属性,该方法必须在SelectN所有其它初始化方法之前调用!
* @param Object opt 配置参数
* topParent - 代表顶级节点的值,默认为"-"
* idKey - 代表id的键名,默认为"id"
* textKey - 代表下拉框text的键名,默认为"text"
* valueKey - 代表下拉框value的键名,默认使用idKey
* parentKey - 代表parent的键名,默认为"parent"
*/
SelectN.setProperties = function(opt) {
topParent = opt.topParent || topParent;
idKey = opt.idKey || idKey;
textKey = opt.textKey || textKey;
valueKey = opt.valueKey || idKey;
parentKey = opt.parentKey || parentKey;
return SelectN;
}
/**
* 显示子级下拉框
* @param Object(Select) oSelect 当前change的下拉框DOM
* @param Array ids 联动的下拉框ID数组
* @param int index 当前下拉框的下一级索引
*/
function showChild(oSelect, ids, index) {
var p = null == oSelect ? topParent : oSelect.options[oSelect.selectedIndex].xid;
var ds = getChilds(p);
clearSelect(ids, index);
var child = $(ids[index]);
for(var i=0,len=ds.length; i<len; i++){
var currentObj = ds[i];
//child.options[child.length] = new Option(ds[i].text, ds[i].text);
var currentOpt = child.options[child.length] = new Option(currentObj[textKey], currentObj[valueKey]);
//child.options[child.length-1].xid=ds[i].id;
currentOpt.xid=currentObj[idKey];
currentOpt.ownerObj = currentObj;
}
}
/**
* 获得子级数据
* @param String p 父级代号
* @return Array childs
*/
function getChilds(p) {
var childs = [];
for(var i=0, len=myData.length; i<len; i++){
//if(p == myData[i].parent)
if(p == myData[i][parentKey]){
childs.push(myData[i]);
}
}
return childs;
}
/**
* 清除所有子级下拉框
* @param Array ids 联动的下拉框ID数组
* @param int index 当前下拉框的下一级索引
*/
function clearSelect(ids, index) {
for(var i=index, len=ids.length; i<len; i++){
$(ids[i]).length=1;
}
}
function $(sid) {
return document.getElementById(sid);
}
//为对象obj追加事件 -- 兼容IE与FF
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
})();
下面是demo(附带几行测试用的数据):
var data = [];
data.push({id:'cn', text:'中国', parent:'-'});
data.push({id:'fj', text:'福建', parent:'cn'});
data.push({id:'gd', text:'广东', parent:'cn'});
data.push({id:'fz', text:'福州', parent:'fj'});
data.push({id:'xm', text:'厦门', parent:'fj'});
data.push({id:'ly', text:'龙岩', parent:'fj'});
data.push({id:'fz-fq', text:'福州1', parent:'fz'});
data.push({id:'fz-mh', text:'福州2', parent:'fz'});
data.push({id:'fz-cl', text:'福州3', parent:'fz'});
data.push({id:'xm-dn', text:'厦门1', parent:'xm'});
data.push({id:'xm-jm', text:'厦门2', parent:'xm'});
data.push({id:'xm-xl', text:'厦门3', parent:'xm'});
data.push({id:'yl-xl', text:'龙岩1', parent:'ly'});
data.push({id:'yl-lc', text:'龙岩2', parent:'ly'});
data.push({id:'yl-sh', text:'龙岩3', parent:'ly'});
data.push({id:'yl-wp', text:'龙岩4', parent:'ly'});
data.push({id:'gz', text:'广州', parent:'gd'});
data.push({id:'sz', text:'深圳', parent:'gd'});
data.push({id:'mx', text:'梅县', parent:'gd'});
data.push({id:'gz-fq', text:'广州1', parent:'gz'});
data.push({id:'gz-mh', text:'广州2', parent:'gz'});
data.push({id:'gz-cl', text:'广州3', parent:'gz'});
data.push({id:'sz-dn', text:'深圳1', parent:'sz'});
data.push({id:'sz-jm', text:'深圳2', parent:'sz'});
data.push({id:'sz-xl', text:'深圳3', parent:'sz'});
data.push({id:'mx-xl', text:'梅县1', parent:'mx'});
data.push({id:'mx-lc', text:'梅县2', parent:'mx'});
data.push({id:'mx-sh', text:'梅县3', parent:'mx'});
data.push({id:'mx-wp', text:'梅县4', parent:'mx'});
data.push({id:'am', text:'美国', parent:'-'});
data.push({id:'ny', text:'纽约', parent:'am'});
data.push({id:'hsd', text:'华盛顿', parent:'am'});
//在onload后执行
window.onload = function() {
/*
SelectN.setProperties({
topParent:'gd', //设置顶级节点的parent值
idKey:'ucode', //指定data中的哪一项代表id
textKey:'text', //指定data中的哪一项代表下拉框中的text
valueKey:'text', //指定data中的哪一项代表下拉框中的value
parentKey:'parent' //指定data中的哪一项代表parent
})(data, 'p1', 'p2', 'p3', 'p4');
*/
SelectN.setProperties({valueKey:'text'}); //重新设定各属性的键值
SelectN(data, 'p1', 'p2', 'p3', 'p4'); //初始化级联关系
}
下面是html相关的代码:
<body>
<select id="p1"><option>-选择-</option></select><br/>
<select id="p2"><option>-选择-</option></select><br/>
<select id="p3"><option>-选择-</option></select><br/>
<select id="p4"><option>-选择-</option></select>
</body>
把上面三段代码放到一起,就能看见效果了。
等哪天突然心血来潮了,再重构一下,加上Ajax动态级联功能
分享到:
相关推荐
"好用简单的可编辑级联下拉框"就是一个旨在提升用户体验的组件,它将传统的静态下拉框与级联选择功能相结合,并引入了编辑能力,使得用户在选择过程中能够更加灵活和高效。 首先,我们要理解什么是“可编辑下拉框”...
**Ajax 实现可配置无刷新级联下拉框** 在 Web 开发中,为了提供用户友好的交互体验,级联下拉框(Cascading Dropdown)是一个常见的需求。级联下拉框允许用户在一个下拉框中选择一个选项后,根据所选的选项动态更新...
在ExtJS 3.4.0版本中,多选下拉框(Multiselect Combobox)是一种常见的用户界面组件,用于提供多个选项供用户选择。这个功能增强了标准的单选下拉框,允许用户同时选择多个条目,通常通过复选框实现。在描述中提到...
级联下拉框的实现主要依赖于`Ext.form.field.ComboBox`类,该类提供了级联数据加载和联动更新的功能。 首先,我们需要创建两个或多个级联的`ComboBox`实例,并为它们设置相应的配置项。这些配置项包括: 1. `store...
在Web开发中,下拉框级联是一种常见的交互方式,用于构建多级选择的界面,例如省份、城市、区县的三级联动。本教程将详细讲解如何利用JQuery、Servlet和JSON技术来实现这一功能。 首先,JSON(JavaScript Object ...
JavaScript是一种客户端脚本语言,广泛应用于网页动态效果和用户交互,使得网页不再只是静态展示,而是能够实时响应用户的操作。 首先,我们要理解什么是“三级级联”。在省市区三级级联中,“三级”指的是省份、...
这个“英文版js地区国家级联”资源提供了一个纯JavaScript实现的解决方案,无需依赖数据库,简化了开发流程。以下是对这个资源的详细解读: 首先,我们要理解什么是级联选择菜单。级联菜单通常用于地理位置选择,...
本文将详细介绍如何使用JavaScript实现省市区三级联动下拉框菜单,实现过程中需要使用HTML构建静态页面,运用JavaScript进行动态的数据联动操作,并通过geo.js文件实现数据的调用和联动逻辑。 ### HTML页面结构 ...
在网页开发中,级联下拉列表是一种常见的交互设计,它允许用户在多个下拉框之间建立联动关系,通常用于地区选择(如省市区)、部门结构等场景。本知识点主要聚焦于使用jQuery实现的级联下拉列表,特别是修正版的实现...
在ASP.NET开发中,省份城市级联是一种常见的需求,它通常用于用户输入地址时,先选择省份,再根据所选省份...在实际应用中,还需要考虑数据安全、性能优化以及兼容性等问题,确保级联下拉框在各种环境下都能正常工作。
在本文中,我们将探讨如何使用Ajax和jQuery配合数据库来实现下拉框的二级联动效果,这对于构建交互式、响应式的Web应用非常重要。二级联动通常指的是一个下拉框的选择会影响另一个下拉框的内容,例如在选择省份后,...
本资源包“精典网页的代码及JS一些精典例子”专注于讲解JavaScript在实际网页开发中的应用,特别是下拉框的动态效果、级联菜单的实现以及数组的巧妙运用。 首先,下拉框的移动是网页设计中常见的一种交互元素。在...
城市级联系统,或称地区级联选择,是一种常见的前端交互设计,它允许用户逐步选择他们的地理位置,例如国家、省份、城市,形成一个级联的下拉选择列表。这种设计提高了用户体验,减少了输入错误,并简化了数据处理。...
例如,我们可以看到如何使用jQuery实现级联下拉框,即当用户在一个下拉框中选择一项时,根据选择自动填充另一个下拉框。 "级联"这个标签也表明了在这些实例中可能包含了联动效果,比如在多级菜单、筛选条件或地区...
JavaScript部分的`redirect`函数首先清除了`type2`下拉框的所有选项,然后遍历`type2`记录集,找到与一级菜单选择值相匹配的记录(通过`news_type_1_id`比较),并在二级菜单中添加新的选项。这样,二级菜单就会根据...
HTML文件可能包含级联下拉框结构,JavaScript文件则包含Ajax请求和数据处理逻辑,而JSON文件可能是预加载的城市数据。在实际开发中,确保这些文件能正确地结合并协同工作,是实现城市三级联动的关键。
在**视图(View)**层面,我们可以使用HTML辅助方法和jQuery来创建和更新级联下拉框。HTML辅助方法如`Html.DropDownListFor()`可以帮助生成下拉列表,而jQuery则用于监听选择事件,向控制器发送AJAX请求,并更新下拉框...
本文将深入探讨"jsp中一些简单的页面技术",包括多级静态树的实现、时间验证的处理方法以及级联下拉菜单的应用。 首先,让我们来看看多级静态树的构建。在JSP中,创建一个多级静态树常用于展示层次结构的数据,如...
文档的注释中提到了“引入外部Js需刷新才能执行”,这暗示了可能有JavaScript文件参与到级联菜单的逻辑中。在网页中引入外部JS文件一般需要考虑文件加载的时机和异步加载的问题。 通过对上述知识点的详细说明,我们...