UDN-企业互联网技术人气社区

板块导航

浏览  : 499
回复  : 2

[jQuery] jQuery 下拉列表 二级联动插件分享

[复制链接]
山外青山的头像 楼主
发表于 2016-12-13 16:18:11 | 显示全部楼层 |阅读模式
  jQuery二级联动插件:jQuery.selected 一个页面可以引用多个联动效果

  jQuery二级联动插件:jQuery.selected
  
  一个页面可以引用多个联动效果,使用方法:
  
  配置js:
  
  复制代码 代码如下:

  1. var defaults = {
  2. NextSelId: '#Select2',
  3. SelTextId: '#Text1',
  4. Separator: '--',
  5. SelStrSet: [
  6. { name: '请选择', subname: '请选择'},
  7. { name: '★高起本★', subname: '计算机科学与技术|汉语言文学' },
  8. { name: '★高起专★', subname: '语文教育|文秘|学前教育|旅游管理|法律事务|经济管理|会计电算化|电子商务|计算机信息管理|软件工程|机电一体化|精细化学品生产技术|机械制造设计及自动化|播音与主持|艺术设计|书法方向艺术设计' },
  9. { name: '★专升本★', subname: '思想政治教育|汉语言文学|英语|数学与应用数学|电子信息工程|计算机科学与技术|会计学|公共事业管理|旅游管理|体育教育|音乐学|艺术设计|书法方向艺术设计'}]
  10. }
  11. var defaults2 = {
  12. NextSelId: '#Select4',
  13. SelTextId: '#Text2',
  14. Separator: '★',
  15. SelStrSet: [
  16. { name: '请选择', subname: '请选择'},
  17. { name: '北京', subname: '北京1|北京2' },
  18. { name: '上海', subname: '上海1|上海2|上海3|上海4' },
  19. { name: '天津', subname: '天津'}]
  20. }
复制代码


  配置说明:
  
  NextSelId:需要联动加载的下拉列表 ID
  
  SelTextId:显示选择选项的文本框 ID
  
  Separator:一级菜单、二级菜单分割字符串
  
  SelStrSet:配置下拉选项
  
  [{ name: '请选择', subname: '请选择'}]
  
  name:一级下拉选项;subname:二级下拉选项,多个用“|”分开;
 
  html页面:
  
  复制代码 代码如下:
 

  1. <body>
  2. <script type="text/JavaScript">
  3. $(function () {
  4. $('#Select1').selected(defaults);
  5. $('#Select3').selected(defaults2);

  6. });
  7. </script>
  8. <select id="Select1">
  9. </select>
  10. <select id="Select2">
  11. </select>
  12. <input id="Text1" type="text" />
  13. <br />
  14. <select id="Select3">
  15. </select>
  16. <select id="Select4">
  17. </select>
  18. <input id="Text2" type="text" />
  19. </body>
复制代码

  有好的建议请留言评论!
发表于 2016-12-13 16:18:40 | 显示全部楼层
JavaScript依赖于浏览器本身,与操作环境无关,只要计算机能运行浏览器,并支持JavaScript的浏览器,就可正确执行,从而实现了“编写一次,走遍天下”的梦想。
使用道具 举报

回复

发表于 2016-12-13 16:18:42 来自手机 | 显示全部楼层
还是挺有借鉴意义的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部