本代码纯属个人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动态级联功能
分享到:
相关推荐
用jquery实现级联下拉框效果 源代码+讲解
使用JQuery实现漂亮的三级级联下拉框,
Android城市级联下拉框(自定义Spinner) 博客地址:http://blog.csdn.net/u012814441/article/details/49073457
AJAX级联下拉框源码 AJAX级联下拉框源码 AJAX级联下拉框源码
内部为四级的级联下拉框,分别为省份,市,县及区和镇及街道四级下拉框;(适用任何语言的纯HTML)详细截图可访问:https://blog.csdn.net/weixin_43972758/article/details/86510419 进行查询。
主要介绍了php实现三级级联下拉框,上网翻找了许多三级级联下拉框实现的资料,下面分享给大家
简单实用的可编辑下拉框,且带有级联效果!操作便捷,调用代码精炼!
asp读取access数据库数据,在html页面动态生成多级级联的下拉框,摆脱静态级联下拉框数据变更烦恼。
js+xml生成级联下拉框代码.docx
使用jquery写的级联下拉框,使用jquery写的级联下拉框
JQuery实战第五讲:级联下拉框效果,如果用在《MVC中更加合适
ASP.Net中的局部刷新,在[removed]中写C#代码,省市地区的局部刷新级联下拉框
仿美团网团购搜索级联下拉框DEMO,可以进行多级选择!
级联下拉框页面控件学习,jsp中常用到,三级下拉框,如,国家、省、市例子
使用ajax和servlet实现两级下拉框的动态级联
ajax实现可配置无刷新级联下拉框...
使用thinkphp框架做出的一个简单的ajax实现的无限添加级联下拉框的例子,ajax写的还可以,比价清晰
基于C#的窗体级联下拉框应用实例,级联的下拉框,当你选择下拉框1的时候,下拉框2的值才会变,其实没什么难度,放上来或许对一些C#打基础的朋友有点帮助,在你选择了两个下拉框的后,所取得的值会显示在下边的文本...
jquery实现无限级联下拉框的封装,实现级联时有用,代码简单实用。可以实现。
基于eclipse开发的Struts+hibernate+SqlServer2000级联下拉框