这是我之前为了ThinkSNS写的一个小工具。通过json生成无限联动的select。至少要求jQuery 1.2.3 以上,因为我用了data方法。
查看DEMO 源文件 min版
//构建如下json,t为列表框的text,v为列表框的value,s表示子一级对象
var json=[
{
t:”欧洲某地”,
v:”欧洲”
},
{
t:”中国某地”,
v:”中国”,
s:[
{
t:”上海”,
v:”上海”
},
{
t:”云南某地”,
v:”云南”,
s:[
{
t:”大理”,
v:”大理”
}
]
}
]
},
{
t:”日本某地”,
v:”日本”,
s:[
{
t:”东京”,
v:”东京”
},
{
t:”北海道”,
v:”北海道”,
s:[
{
t:”北海道的某个地方”,
v:”北海道的某个地方”
}
]
}
]
}
];
//调用即可
$(“#selectt”).json2select(json,[“中国”,”云南”,”大理”]);
另外,如果用1.2.1的也想用的话,可以手动提取1.2.6里的data方法,或者简单用下面的模拟一下即可
(function($) {
$.fn.data=function(key,value) {
return $.data(this[0],key,value);
}
})(jQuery);
update:
附: 全国城市数据
并且更新到了 1.0.1版。以前下载的同学可以重新下载一份。
生成的联动都是横向的,怎么变成纵向的?
老大,这到底是干什么的啊?
呵呵,以后有缘你自会看得懂~若要不懂也不必强求~~
* @param deep,整形数字,默认值:0,用于设置初始的深度,如设置为0,
* 则第一个select的name属性就是sel0,第二个就是sel1,接着sel2,sel3,sel4以此排下去。
在这个看明白了,原来选择的名字由上面的sel0,sel1,sel2!非常感谢!!!
你好喔, 你这个工具偶一直在用, 很好用! 很感谢!
但是之前使用时发现好像有点小问题, 在设置有默认值的时候, 如果直接把第一级改变成”请选择”, 后面的几个下拉框也不会被清空. 需要在slct.change里的最前面加上一句$(this).nextAll().remove();才可以解决问题.
非常感谢你的反馈,看起来确实有这个问题
昨天有幸终于用上这个插件了,发现些实际中可能遇到的问题,所以有些地方小改了下,你看看合理否:
$(“[name=”+name+deep+”]”,_this).nextAll().remove();
改为:
$(“[name=”+name+deep+”]”,_this).nextAll(“select”).remove();
主要是避免级联选单后面放东西的时候,后面的无关东西也遭移除。
$(this).val()&&_this.json2select($(“:selected”,this).data(“s”),dftFlag?dft.slice(1):[],name,$(this).attr(“name”).match(/\d+/)[0]);
改为:
$(this).val()?_this.json2select($(“:selected”,this).data(“s”),dftFlag?dft.slice(1):[],name,$(this).attr(“name”).match(/\d+/)[0]):$(this).nextAll(“select”).remove();
主要是解决当一级select改为“请选择”时,后面select依然存在的逻辑问题,改后某级的select选为“请选择”后后续的select一律移除。
为什么没有ID 啊 真悲剧
什么ID啊?
如何控制联动的级数。如果我只要2级联动就够了的话
如果只要两级的话,那么数据也需要只有两级。目前这个东西是跟数据紧密结合的。
默认也是2级,但是只改deep=2的话页面初始是3级
请问怎么获取最终选定的值?