jQuery Select多选

所属分类：输入-选择框

150005 405 查看评论 (18)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：jquery.multi-select是一款jQuery开发的美化Select多选插件，界面上存在未选和已选两个框方便选择，支持分组。

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

afterInit	function	function(container){}	Function to call after the multiSelect initilization.
afterSelect	function	function(values){}	Function to call after one item is selected.
afterDeselect	function	function(values){}	Function to call after one item is deselected.
selectableHeader	HTML/Text	null	Text or HTML to display in the selectable header.
selectionHeader	HTML/Text	null	Text or HTML to display in the selection header.
selectableFooter	HTML/Text	null	Text or HTML to display in the selectable footer.
selectionFooter	HTML/Text	null	Text or HTML to display in the selection footer.
disabledClass	String	'disabled'	CSS class for disabled items.
selectableOptgroup	Boolean	false	Click on optgroup will select all nested options when set to true.
keepOrder	Boolean	false	The selected items will be displayed in the same order than they are selected.
dblClick	Boolean	false	Replace the defautl click event to select items by the dblclick one.
cssClass	String	""	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:

value	String	true	The value of the option to create
text	String	true	The text of the option to create
index	Number	false	The index where to insert the option. If none given, it will be inserted as last option.
nested	String	false	If 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 arrow	Select next item in the focused list
[ ↑ ] Up arrow	Select previous item in the focused list
[ — ] Space	Add/remove item depending on which list is currently focused
[ ← ] Left arrow	Focus the previous list
[ → ] Right arrow	Focus 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日期日历选择控件

CSS3图片HOVER炫酷动画效果

vue选择检索国家页面模板(原创）

vue.js基于json异步调用可选择并且可以通过国家名称和手机区号进行检索相应的国家，并且有中文、日语、英语、越南语、韩语、五种语言，这些语言的显示是根据游览器语言而定。代码比较容易理解，用起来很方便。(支持多语言自适应手机和网站)

选择框

24126 271

强大的下拉框美化插件

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

选择框

53390 350

jQuery首字母搜索全国省市区插件

一款简单实用的响应式首字母搜索全国省市区插件适合手机页面和网站页面

选择框

24069 297

JQ表单选择插件

插件包含单选按钮、复选框以及下拉选择菜单的功能，样式美化可自己编写css

选择框

58317 315

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

樊凯蹦 0

2019/3/26 9:53:57

路小翔 0

2019/2/12 17:20:48

完美睡姿 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

Aimee 0

2016/3/11 15:03:37

查看更多评论

😃

😀
😉
😥
😵
😫
😘
😡
👍
🌹
👏
🍺
🍉
🌙
⭐
💖
💔

😃

😀
😉
😥
😵
😫
😘
😡
👍
🌹
👏
🍺
🍉
🌙
⭐
💖
💔

取消回复

jQuery Select多选

HTML

JavaScript

Options

Methods

.multiSelect(options)

.multiSelect('select', String|Array)

.multiSelect('deselect', String|Array)

.multiSelect('select_all')

.multiSelect('deselect_all')

.multiSelect('refresh')

.multiSelect('addOption', Hash)

Keyboard

Demos

Pre-selected options

Callbacks

Optgroup

vue选择检索国家页面模板(原创）

强大的下拉框美化插件

jQuery首字母搜索全国省市区插件

JQ表单选择插件

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

PROMULGATOR

消逝DE淩雲_7k6

jQuery Select多选

HTML

JavaScript

Options

Methods

.multiSelect(options)

.multiSelect('select', String|Array)

.multiSelect('deselect', String|Array)

.multiSelect('select_all')

.multiSelect('deselect_all')

.multiSelect('refresh')

.multiSelect('addOption', Hash)

Keyboard

Demos

Pre-selected options

Callbacks

Optgroup

vue选择检索国家页面模板(原创）

强大的下拉框美化插件

jQuery首字母搜索全国省市区插件

JQ表单选择插件

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

PROMULGATOR

消逝DE淩雲_7k6

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