UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery Select多选

所属分类：输入-选择框

 147672  405  查看评论 (18)
分享到微信朋友圈
X
jQuery Select多选 ie兼容8
 查看演示  website  立即下载

HTML

<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>

JavaScript

$('#my-select').multiSelect()

Options

afterInitfunctionfunction(container){}Function to call after the multiSelect initilization.
afterSelectfunctionfunction(values){}Function to call after one item is selected.
afterDeselectfunctionfunction(values){}Function to call after one item is deselected.
selectableHeaderHTML/TextnullText or HTML to display in the selectable header.
selectionHeaderHTML/TextnullText or HTML to display in the selection header.
selectableFooterHTML/TextnullText or HTML to display in the selectable footer.
selectionFooterHTML/TextnullText or HTML to display in the selection footer.
disabledClassString'disabled'CSS class for disabled items.
selectableOptgroupBooleanfalseClick on optgroup will select all nested options when set to true.
keepOrderBooleanfalseThe selected items will be displayed in the same order than they are selected.
dblClickBooleanfalseReplace the defautl click event to select items by the dblclick one.
cssClassString""Add a custom CSS class to the multiselect container.

Methods

.multiSelect(options)

Activates your content as a multiselect. Accepts an optional options object

$('#your-select').multiSelect({});

Note: You must init the multiple select with $('#your-select').multiSelect() before calling one of the following methods.

.multiSelect('select', String|Array)

Select the item with the value given in parameter. The value can be either a string ('elem_1') matching the value of the option oran Array of values (['elem_1', 'elem_42']).

$('#your-select').multiSelect('select', String|Array);

.multiSelect('deselect', String|Array)

Deselect the item with the value given in parameter. The value can be either a string ('elem_1') matching the value of the option oran Array of values (['elem_1', 'elem_42']).

$('#your-select').multiSelect('deselect', String|Array);

.multiSelect('select_all')

Select all elements.

$('#your-select').multiSelect('deselect_all');

.multiSelect('deselect_all')

Deselect all items previously selected.

$('#your-select').multiSelect('select_all');

.multiSelect('refresh')

Refresh current multiselect.

$('#your-select').multiSelect('refresh');

.multiSelect('addOption', Hash)

Dynamically add option to the multiselect. 
The options hash is described bellow:

valueStringtrueThe value of the option to create
textStringtrueThe text of the option to create
indexNumberfalseThe index where to insert the option. If none given, it will be inserted as last option.
nestedStringfalseIf there are optgroups you can choose under which optgroup you want to insert the option.
$('#your-select').multiSelect('addOption', { value: 'test', text: 'test', index: 0, nested: 'optgroup_label' });

Keyboard

[  ↓  ]  Down arrowSelect next item in the focused list
[  ↑  ]  Up arrowSelect previous item in the focused list
[ — ]  SpaceAdd/remove item depending on which list is currently focused
[ ← ]  Left arrowFocus the previous list
[ → ]  Right arrowFocus the next list

Demos

Pre-selected options

<select id='pre-selected-options' multiple='multiple'>
  <option value='elem_1' selected>elem 1</option>
  <option value='elem_2'>elem 2</option>
  <option value='elem_3'>elem 3</option>
  <option value='elem_4' selected>elem 4</option>
  ...
  <option value='elem_100'>elem 100</option>
</select>
$('#pre-selected-options').multiSelect();

Callbacks

<select id='callbacks' multiple='multiple'>
  <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>
$('#callbacks').multiSelect({
  afterSelect: function(values){
    alert("Select value: "+values);
  },
  afterDeselect: function(values){
    alert("Deselect value: "+values);
  }
});

Optgroup

<select id='optgroup' multiple='multiple'>
  <optgroup label='Friends'>
    <option value='1'>Yoda</option>
    <option value='2' selected>Obiwan</option>
  </optgroup>
  <optgroup label='Enemies'>
    <option value='3'>Palpatine</option>
    <option value='4' disabled>Darth Vader</option>
  </optgroup>
</select>
$('#optgroup').multiSelect({ selectableOptgroup: true });
相关插件-选择框
查看更多

div模拟下拉省市级联三级联动附带地区数据(原创)

 带地区代码，兼容到ie8；浏览器样式统一，下拉图标可自行更换，根据隐藏input value值获取地区代码
  选择框
 28771  326

jQuery移动端城市二级联动

 这是一个移动端省市选择的插件，因为弹框基于右侧滑动滑动显示弹出，用户体验好
  选择框
 27652  284

jQuery双列表左右切换选择

 左右切换选择，多项选择，并可以回到原始位置而不是向下或向上累加，超出出现滚动条
  选择框
 37077  372

jQuery多级联动插件(单选多选)tntreebox插件

 tntreebox实现多级联动一级单选二级三级多选
  选择框
 35823  337

讨论这个项目（18）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    樊凯蹦 0
    2019/3/26 9:53:57
    伸手党是真可怕啊 回复
    路小翔 0
    2019/2/12 17:20:48
    demo页面顶部有github的地址，想下载的童鞋去github下载吧，里面有完整的demo。记得在select上加name值，提交后台直接post接收就好。感觉一般般 回复
    完美睡姿 0
    2018/10/12 10:51:48
    这么好的插件你们还有什么挑的 回复
    完美睡姿 0
    2018/10/12 10:51:16
    果果 0
    2017/6/26 15:12:58

    真恶心的插件。浪费我大半天的时间

    回复
    yBoy 0
    2017/6/1 15:13:15

    好恶心的插件，没有demo完全不知道怎么用

    回复
    追梦者 0
    2017/2/16 15:08:53

    不错，下来看看

    回复
    snow??rain 0
    2017/1/5 11:01:15

    github 上都有  这里是搬运过来的。！！！

    回复
    菱形站位 0
    2016/11/22 14:11:49
    没demo,治不了了,不会用,尴尬 回复
    Aimee 0
    2016/3/11 15:03:37
    下载下来的怎么没有demo 回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复