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

jQuery Select多选

所属分类：输入-选择框

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

模仿QQ讨论组加人的自动搜索和添加

 注意输入框中要空一格
  选择框
 33724  310

jquery京东省市区三级联动

 地址三级联动
  选择框
 66210  647

jQuery国籍选择器（包含国籍代码）

 jQuery国籍选择，数据是全的，排过序
  选择框
 29486  310

jQuery世界地区三级联动

 jQuery世界地区三级联动带搜索功能
  选择框
 43685  371

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