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

  jQuery二级联动插件:jQuery.selected

  一个页面可以引用多个联动效果,使用方法:

  配置js:

  

复制代码 代码如下:

  var defaults = {

  NextSelId: '#Select2',

  SelTextId: '#Text1',

  Separator: '--',

  SelStrSet: [

  { name: '请选择', subname: '请选择'},

  { name: '★高起本★', subname: '计算机科学与技术|汉语言文学' },

  { name: '★高起专★', subname: '语文教育|文秘|学前教育|旅游管理|法律事务|经济管理|会计电算化|电子商务|计算机信息管理|软件工程|机电一体化|精细化学品生产技术|机械制造设计及自动化|播音与主持|艺术设计|书法方向艺术设计' },

  { name: '★专升本★', subname: '思想政治教育|汉语言文学|英语|数学与应用数学|电子信息工程|计算机科学与技术|会计学|公共事业管理|旅游管理|体育教育|音乐学|艺术设计|书法方向艺术设计'}]

  }

  var defaults2 = {

  NextSelId: '#Select4',

  SelTextId: '#Text2',

  Separator: '★',

  SelStrSet: [

  { name: '请选择', subname: '请选择'},

  { name: '北京', subname: '北京1|北京2' },

  { name: '上海', subname: '上海1|上海2|上海3|上海4' },

  { name: '天津', subname: '天津'}]

  }

  配置说明:

  NextSelId:需要联动加载的下拉列表 ID

  SelTextId:显示选择选项的文本框 ID

  Separator:一级菜单、二级菜单分割字符串

  SelStrSet:配置下拉选项

    [{ name: '请选择', subname: '请选择'}]

      name:一级下拉选项;subname:二级下拉选项,多个用“|”分开;

  html页面:

  

复制代码 代码如下:

  <body>

  <script type="text/javascript">

  $(function () {

  $('#Select1').selected(defaults);

  $('#Select3').selected(defaults2);

  });

  </script>

  <select id="Select1">

  </select>

  <select id="Select2">

  </select>

  <input id="Text1" type="text" />

  <br />

  <select id="Select3">

  </select>

  <select id="Select4">

  </select>

  <input id="Text2" type="text" />

  </body>

  有好的建议请留言评论!

  完整JS下载地址