IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

LinkageSelect 基于jQuery的联动下拉菜单

周帆的web实验室 2009-11-02 13:34:16 累计浏览 2,778 次
本机暂存

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

    2009-04-25_141108.jpg

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

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

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

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

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

    在线演示

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,350)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,406)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,934)
  4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,849)
  5. 天朝第二代身份证号码的验证机制 (累计阅读 14,764)
  6. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  7. 分享一个JQUERY颜色选择插件 (累计阅读 14,225)
  8. 什么是全栈工程师? (累计阅读 14,040)
  9. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,735)
  10. 7 天打造前端性能监控系统 (累计阅读 11,190)