走走停停看看 » 插件 http://shawphy.com 关注HTML,CSS,JavaScript,jQuery等前端开发 Mon, 12 Jul 2010 15:45:21 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 json2select http://shawphy.com/2008/12/json2select.html http://shawphy.com/2008/12/json2select.html#comments Sat, 20 Dec 2008 05:57:17 +0000 Shawphy http://shawphy.com/2008/12/json2select.html Continue reading →]]> 这是我之前为了ThinkSNS写的一个小工具。通过json生成无限联动的select。至少要求jQuery 1.2.3 以上，因为我用了data方法。
查看DEMO 源文件 min版

  1. //构建如下json，t为列表框的text,v为列表框的value，s表示子一级对象
  2. var json=[
  3.     {
  4.         t:"欧洲某地",
  5.         v:"欧洲"
  6.     },
  7.     {
  8.         t:"中国某地",
  9.         v:"中国",
  10.         s:[
  11.             {
  12.                 t:"上海",
  13.                 v:"上海"
  14.             },
  15.             {
  16.                 t:"云南某地",
  17.                 v:"云南",
  18.                 s:[
  19.                     {
  20.                         t:"大理",
  21.                         v:"大理"
  22.                     }
  23.                 ]
  24.             }
  25.         ]
  26.     },
  27.     {
  28.         t:"日本某地",
  29.         v:"日本",
  30.         s:[
  31.             {
  32.                 t:"东京",
  33.                 v:"东京"
  34.             },
  35.             {
  36.                 t:"北海道",
  37.                 v:"北海道",
  38.                 s:[
  39.                     {
  40.                         t:"北海道的某个地方",
  41.                         v:"北海道的某个地方"
  42.                     }
  43.                 ]
  44.             }
  45.         ]
  46.     }
  47. ];
  48. //调用即可
  49. $("#selectt").json2select(json,["中国","云南","大理"]);

另外，如果用1.2.1的也想用的话，可以手动提取1.2.6里的data方法，或者简单用下面的模拟一下即可

  1. (function($) {
  2.     $.fn.data=function(key,value) {
  3.         return $.data(this[0],key,value);
  4.     }
  5. })(jQuery);

update:
附： 全国城市数据
并且更新到了 1.0.1版。以前下载的同学可以重新下载一份。

]]> http://shawphy.com/2008/12/json2select.html/feed 9