这是我之前为了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版。以前下载的同学可以重新下载一份。
生成的联动都是横向的，怎么变成纵向的？
Pingback: json2select的全国城市数据 | 走走停停看看
老大，这到底是干什么的啊？
呵呵，以后有缘你自会看得懂~若要不懂也不必强求~~
* @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一律移除。
Pingback: JQuery无限联动的下拉框插件（选城市） | Fatkun's Blog