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

jQuery Select多选

所属分类：输入-选择框

 149701  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 });
相关插件-选择框
查看更多

js城市查询器（完美仿携程）

 高仿携程城市查询器在之前楼主版本上进行改进，添加了拼音简写索引，添加了字母标识与分割，简化了插件引入
  选择框
 47947  418

酷炫的发光单选框

 发光的动态竖直单选框
  选择框
 25952  331

bootstrap下拉列表插件

 bootstrap插件一款基于jquery bootstrap的下拉列表插件 ，有很多样式的下拉框
  选择框
 64889  499

强大的下拉框美化插件

 Select2是一款基于jQuery的专门针对下拉框的美化插件
  选择框
 53235  350

讨论这个项目（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 回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复