LinkageSelect 基于jQuery的联动下拉菜单

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

2009-04-25_141108.jpg

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

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

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

  • 数据与代码分离,对应不同的菜单只需要准备不同的数据
  • 支持变量数据或AJAX调用外部数据
  • 支持自定义菜单根节点
  • 支持自定义菜单默认选中值
  • 可动态改变调用的菜单数据

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

在线演示

9 Responses to “LinkageSelect 基于jQuery的联动下拉菜单”

  1. tina 说道:

    周帆,看抓虾无意中看到了周帆的web实验室,在想是不是你呢,点进来后惊喜的发现真的是你,哈哈,知道我是谁嘛,饭团的only one,我要向你学习,以后多来踩踩,祝你好运

    • RayChou 说道:

      难道是创说中的财务部部长?
      您的大驾真是让小站蓬荜生辉啊。
      互相学习,共同进步才是王道。

  2. AaronLucas 说道:

    RayChou

    很高兴看到你出了个插件,刚学JS不久,但发现个问题,就是联动下拉的宽度不能设定为百分数,否则会出问题。如下,

  3. AaronLucas 说道:

    select class=”level_1″ style=”width:80%;”>

  4. 小飞 说道:

    请问提交的数据是数据,可否提供一个提交的数据是文字呢?

  5. sorry 说道:

    不好意思 把某个页面转向到百度了 呵呵

  6. Open-Lib 说道:

    你好,博主.
    该插件已被收录,感谢你共享你的插件.

    插件地址为:http://www.open-lib.com/Lib/960.jsp

  7. ezsky 说道:

    博主你好,
    有个问题请教, 我在用linkageSelect的地区选择的时候,怎么能把”请选择”换成”省份”,”地级市”,”市,县,区”

  8. konio 说道:

    ie9下
    ajax : ‘jp_area.php?act=ajaxen’
    取得结果排序会乱掉.

Leave a Reply