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

jQuery Select多选

所属分类：输入-选择框

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

jQuery移动端 城市四级联动

 jQuery移动端城市四级联动,之前有一版是三级联动，这个增加了一级。
  选择框
 36441  378

jQuery自定义下拉框美化

 自定义下拉框美化（可以自定义样式）
  选择框
 47156  347

az索引滑动城市列表选择(原创)

城市列表选择 ， 可滑动， 带历史记录
  选择框
 28176  308

jQuery移动端城市选择插件

 jQuery移动端城市选择插件支持按字母快速定位。
  选择框
 61092  392

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