LinkageSelect 基于jQuery的联动下拉菜单大屏查看

发布于:2015年05月20日 已被阅读

在Web开发中联动下拉菜单的应用非常广泛,拿我们最常见的地区选择来说,相信几乎所有的网友都填过下面这样的表单:

2009-04-25_141108.jpg

当选择省份后,之后的下拉菜单中会自动给出前一个菜单中所选省份内的城市,以此类推,当选择城市后,再后面一个菜单会自动给出区或县城让用户选择,简单说就是每一次的选择都会影响下一个菜单的可选项,我们称之为联动菜单。

这样的JS代码在网上很多,我曾经也写过一个全国省市区三级联动下拉菜单,在项目中也得到了应用,但在实际项目中,需要使用类似这样联动菜单的地方很多,比如类别的选择等等,这样我就需要为每一个需求去写一份代码,而其中90%以上的代码都是重复或相似的,不但浪费了时间,用户在浏览网页时更需要下载大量重复的代码,增加不必要的开销。

因此我也一直有想法,将联动功能与联动数据分离开来,让一份JS代码能够适应不同的联动菜单需求,于是便有了LinkageSelect,基于jQuery的联动选择菜单。目前已经实现但不局限于以下功能:

  • 数据与代码分离,对应不同的菜单只需要准备不同的数据

  • 支持变量数据或AJAX调用外部数据

  • 支持自定义菜单根节点

  • 支持自定义菜单默认选中值

  • 可动态改变调用的菜单数据

在当前发布的版本中,还包括一个DataBuilder,支持手工创建用于LinkageSelect的JSON动态数据源。计划中就不再提供其他数据装换工具,有需要的朋友可以研究DataBuilder数据库格式,自行导入,再通过json.php输出所需数据源。

在线演示


最新发布
linux下svn提交忽略某些文件... (173)
使用批处理来批量更新、提交SVN... (136)
linux查看目录文件大小命令 (146)
linux tar打包压缩排除某个... (134)
Linux tar压缩和解压 (192)
SVN子命令add用法浅析 (130)
热门博文
网友FBI探案:马蓉iPad惊人发现... (43345)
霍金携手俄罗斯富豪耗资1亿美元寻找外... (4747)
如何才能查看PHP内置函数源代码... (1210)
微信支付开发当前URL未注册的解决方... (575)
《谁为爱情买单》中的经典面试 ... (442)
让虚拟主机也用上SVN:适用于个人的... (395)
精华博文
[推荐]Centos7 安装配置 SVN (159)
easyswoole框架安装 (174)
php开启pecl的支持(推荐) (157)
1-10个恋爱表现:男朋友爱你程度到... (164)
女生喜欢你的10个程度,到第六个就可... (141)
Eclipse 没有Server选项... (211)
友情链接
我来忙 (110)