页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

jquery两边多选择插件jquery.multi-select.js

表单 HTML我帮您 1年前  次浏览

Multiselect是一个采用jQuery实现的两边多选列表控件。可以将需要选定的项目从左边添加到右边的列表框中。或者将不需要的项目从右边列表框中删除。

jquery两边多选择插件jquery.multi-select.js

Multiselect有以下功能特性:

可以将列表框左右两边的项进行移动(互换)。

可以通过单击或双击事件(可配)移动列表框中的项。

可以设置已选项目的最大数。

可以自定义外观样式。

Name type default description
afterInit function function(container){} Function to call after the multiSelect initilization.
afterSelect function function(values){} Function to call after one item is selected.
afterDeselect function function(values){} Function to call after one item is deselected.
selectableHeader HTML/Text null Text or HTML to display in the selectable header.
selectionHeader HTML/Text null Text or HTML to display in the selection header.
selectableFooter HTML/Text null Text or HTML to display in the selectable footer.
selectionFooter HTML/Text null Text or HTML to display in the selection footer.
disabledClass String 'disabled' CSS class for disabled items.
selectableOptgroup Boolean false Click on optgroup will select all nested options when set to true.
keepOrder Boolean false The selected items will be displayed in the same order than they are selected.
dblClick Boolean false Replace the defautl click event to select items by the dblclick one.
cssClass String "" Add a custom CSS class to the multiselect container.

<html>
  <head>
    <link href="path/to/multiselect.css" media="screen" rel="stylesheet" type="text/css">
  </head>
  <body>
    <select multiple="multiple" id="my-select" name="my-select[]">
      <option value='elem_1'>elem 1</option>
      <option value='elem_2'>elem 2</option>
      <option value='elem_3'>elem 3</option>
      <option value='elem_4'>elem 4</option>
      ...
      <option value='elem_100'>elem 100</option>
    </select>
    <script src="path/to/jquery.multi-select.js" type="text/javascript"></script>
  </body>
</html>

相关链接

发表评论