在Web开发中联动下拉菜单的应用非常广泛,拿我们最常见的地区选择来说,相信几乎所有的网友都填过下面这样的表单:
![]()
当选择省份后,之后的下拉菜单中会自动给出前一个菜单中所选省份内的城市,以此类推,当选择城市后,再后面一个菜单会自动给出区或县城让用户选择,简单说就是每一次的选择都会影响下一个菜单的可选项,我们称之为联动菜单。
这样的JS代码在网上很多,我曾经也写过一个全国省市区三级联动下拉菜单,在项目中也得到了应用,但在实际项目中,需要使用类似这样联动菜单的地方很多,比如类别的选择等等,这样我就需要为每一个需求去写一份代码,而其中90%以上的代码都是重复或相似的,不但浪费了时间,用户在浏览网页时更需要下载大量重复的代码,增加不必要的开销。
因此我也一直有想法,将联动功能与联动数据分离开来,让一份JS代码能够适应不同的联动菜单需求,于是便有了LinkageSelect,基于jQuery的联动选择菜单。目前已经实现但不局限于以下功能:
- 数据与代码分离,对应不同的菜单只需要准备不同的数据
- 支持变量数据或AJAX调用外部数据
- 支持自定义菜单根节点
- 支持自定义菜单默认选中值
- 可动态改变调用的菜单数据
在当前发布的版本中,还包括一个DataBuilder,支持手工创建用于LinkageSelect的JSON动态数据源。计划中就不再提供其他数据装换工具,有需要的朋友可以研究DataBuilder数据库格式,自行导入,再通过json.php输出所需数据源。

周帆,看抓虾无意中看到了周帆的web实验室,在想是不是你呢,点进来后惊喜的发现真的是你,哈哈,知道我是谁嘛,饭团的only one,我要向你学习,以后多来踩踩,祝你好运
难道是创说中的财务部部长?
您的大驾真是让小站蓬荜生辉啊。
互相学习,共同进步才是王道。
RayChou
很高兴看到你出了个插件,刚学JS不久,但发现个问题,就是联动下拉的宽度不能设定为百分数,否则会出问题。如下,
select class=”level_1″ style=”width:80%;”>
请问提交的数据是数据,可否提供一个提交的数据是文字呢?
不好意思 把某个页面转向到百度了 呵呵
你好,博主.
该插件已被收录,感谢你共享你的插件.
插件地址为:http://www.open-lib.com/Lib/960.jsp
博主你好,
有个问题请教, 我在用linkageSelect的地区选择的时候,怎么能把”请选择”换成”省份”,”地级市”,”市,县,区”
ie9下
ajax : ‘jp_area.php?act=ajaxen’
取得结果排序会乱掉.