jQuery Select多选

所属分类:输入-选择框

 135817  374  查看评论 (18)
分享到微信朋友圈
X
jQuery Select多选 ie兼容8

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个人信息表单,联动、下拉框表单美化
  选择框
 35908  373

jQuery移动端自定义select插件Ansel

Ansel自定义手机浏览器重置下拉选择带搜索
  选择框
 36947  300

jQuery移动端城市二级联动

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

省市区三级联动

省市区三级联动,代码简洁
  选择框
 35427  347

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