json2select

这是我之前为了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版。以前下载的同学可以重新下载一份。

《json2select》有15个想法

  1. * @param deep,整形数字,默认值:0,用于设置初始的深度,如设置为0,
    * 则第一个select的name属性就是sel0,第二个就是sel1,接着sel2,sel3,sel4以此排下去。

    在这个看明白了,原来选择的名字由上面的sel0,sel1,sel2!非常感谢!!!

  2. 你好喔, 你这个工具偶一直在用, 很好用! 很感谢!
    但是之前使用时发现好像有点小问题, 在设置有默认值的时候, 如果直接把第一级改变成”请选择”, 后面的几个下拉框也不会被清空. 需要在slct.change里的最前面加上一句$(this).nextAll().remove();才可以解决问题.

  3. 昨天有幸终于用上这个插件了,发现些实际中可能遇到的问题,所以有些地方小改了下,你看看合理否:
    $(“[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一律移除。

发表评论