Multiselect
This plugin is a drop-in replacement for the standard <select> element with multiple attribute activated.
Free
(under
WTFPL
license)
Works in an
unobtrusive
fashion
Fully
open sourced
Keyboard
support
Provides some
callbacks
Fully customizable via
CSS
Depends on
jQuery 1.8+
Tiny code
~8kb
minified
elem 1
elem 2
elem 3
elem 4
elem 5
elem 6
elem 7
elem 8
elem 9
elem 10
elem 11
elem 12
elem 13
elem 14
elem 15
elem 16
elem 17
elem 18
elem 19
elem 20
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
Name
type
default
description
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.
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('select_all');.multiSelect('deselect_all')
Deselect all items previously selected.
$('#your-select').multiSelect('select_all');.multiSelect('refresh')
Refresh current multiselect.
$('#your-select').multiSelect('refresh');Keyboard
key
function
[ ↓ ] 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 focused
[ ← ] Left arrow
Focus on the next list
[ → ] Right arrow
Focus on the previous list
Pre-selected options
<select id='pre-selected-options' 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>$('#pre-selected-options').multiSelect();
elem 1
elem 2
elem 3
elem 4
elem 5
elem 6
elem 7
elem 8
elem 9
elem 10
elem 11
elem 12
elem 13
elem 14
elem 15
elem 16
elem 17
elem 18
elem 19
elem 20
elem 21
elem 22
elem 23
elem 24
elem 25
elem 26
elem 27
elem 28
elem 29
elem 30
elem 31
elem 32
elem 33
elem 34
elem 35
elem 36
elem 37
elem 38
elem 39
elem 40
elem 41
elem 42
elem 43
elem 44
elem 45
elem 46
elem 47
elem 48
elem 49
elem 50
elem 51
elem 52
elem 53
elem 54
elem 55
elem 56
elem 57
elem 58
elem 59
elem 60
elem 61
elem 62
elem 63
elem 64
elem 65
elem 66
elem 67
elem 68
elem 69
elem 70
elem 71
elem 72
elem 73
elem 74
elem 75
elem 76
elem 77
elem 78
elem 79
elem 80
elem 81
elem 82
elem 83
elem 84
elem 85
elem 86
elem 87
elem 88
elem 89
elem 90
elem 91
elem 92
elem 93
elem 94
elem 95
elem 96
elem 97
elem 98
elem 99
elem 100
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);
}
});
elem 1
elem 2
elem 3
elem 4
elem 5
elem 6
elem 7
elem 8
elem 9
elem 10
elem 11
elem 12
elem 13
elem 14
elem 15
elem 16
elem 17
elem 18
elem 19
elem 20
elem 21
elem 22
elem 23
elem 24
elem 25
elem 26
elem 27
elem 28
elem 29
elem 30
elem 31
elem 32
elem 33
elem 34
elem 35
elem 36
elem 37
elem 38
elem 39
elem 40
elem 41
elem 42
elem 43
elem 44
elem 45
elem 46
elem 47
elem 48
elem 49
elem 50
elem 51
elem 52
elem 53
elem 54
elem 55
elem 56
elem 57
elem 58
elem 59
elem 60
elem 61
elem 62
elem 63
elem 64
elem 65
elem 66
elem 67
elem 68
elem 69
elem 70
elem 71
elem 72
elem 73
elem 74
elem 75
elem 76
elem 77
elem 78
elem 79
elem 80
elem 81
elem 82
elem 83
elem 84
elem 85
elem 86
elem 87
elem 88
elem 89
elem 90
elem 91
elem 92
elem 93
elem 94
elem 95
elem 96
elem 97
elem 98
elem 99
elem 100
Public methods
<a href='#' id='select-all'>select all</a>
<a href='#' id='deselect-all'>deselect all</a>
<a href='#' id='select-100'>select 100 elems</a>
<a href='#' id='deselect-100'>deselect 100 elems</a>
<select id='public-methods' 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_1000'>elem 100</option>
</select>$('#public-methods').multiSelect();
$('select-all').click(function(){
$('#public-methods').multiSelect('select_all');
return false;
});
$('deselect-all').click(function(){
$('#public-methods').multiSelect('deselect_all');
return false;
});
$('select-100').click(function(){
$('#public-methods').multiSelect('select', ['elem_0', 'elem_1' ..., 'elem_99']);
return false;
});
$('deselect-100').click(function(){
$('#public-methods').multiSelect('deselect', ['elem_0', 'elem_1' ..., 'elem_99']);
return false;
});
select all
·
deselect all
·
select 100 elems
·
deselect 100 elems
elem 1
elem 2
elem 3
elem 4
elem 5
elem 6
elem 7
elem 8
elem 9
elem 10
elem 11
elem 12
elem 13
elem 14
elem 15
elem 16
elem 17
elem 18
elem 19
elem 20
elem 21
elem 22
elem 23
elem 24
elem 25
elem 26
elem 27
elem 28
elem 29
elem 30
elem 31
elem 32
elem 33
elem 34
elem 35
elem 36
elem 37
elem 38
elem 39
elem 40
elem 41
elem 42
elem 43
elem 44
elem 45
elem 46
elem 47
elem 48
elem 49
elem 50
elem 51
elem 52
elem 53
elem 54
elem 55
elem 56
elem 57
elem 58
elem 59
elem 60
elem 61
elem 62
elem 63
elem 64
elem 65
elem 66
elem 67
elem 68
elem 69
elem 70
elem 71
elem 72
elem 73
elem 74
elem 75
elem 76
elem 77
elem 78
elem 79
elem 80
elem 81
elem 82
elem 83
elem 84
elem 85
elem 86
elem 87
elem 88
elem 89
elem 90
elem 91
elem 92
elem 93
elem 94
elem 95
elem 96
elem 97
elem 98
elem 99
elem 100
elem 101
elem 102
elem 103
elem 104
elem 105
elem 106
elem 107
elem 108
elem 109
elem 110
elem 111
elem 112
elem 113
elem 114
elem 115
elem 116
elem 117
elem 118
elem 119
elem 120
elem 121
elem 122
elem 123
elem 124
elem 125
elem 126
elem 127
elem 128
elem 129
elem 130
elem 131
elem 132
elem 133
elem 134
elem 135
elem 136
elem 137
elem 138
elem 139
elem 140
elem 141
elem 142
elem 143
elem 144
elem 145
elem 146
elem 147
elem 148
elem 149
elem 150
elem 151
elem 152
elem 153
elem 154
elem 155
elem 156
elem 157
elem 158
elem 159
elem 160
elem 161
elem 162
elem 163
elem 164
elem 165
elem 166
elem 167
elem 168
elem 169
elem 170
elem 171
elem 172
elem 173
elem 174
elem 175
elem 176
elem 177
elem 178
elem 179
elem 180
elem 181
elem 182
elem 183
elem 184
elem 185
elem 186
elem 187
elem 188
elem 189
elem 190
elem 191
elem 192
elem 193
elem 194
elem 195
elem 196
elem 197
elem 198
elem 199
elem 200
elem 201
elem 202
elem 203
elem 204
elem 205
elem 206
elem 207
elem 208
elem 209
elem 210
elem 211
elem 212
elem 213
elem 214
elem 215
elem 216
elem 217
elem 218
elem 219
elem 220
elem 221
elem 222
elem 223
elem 224
elem 225
elem 226
elem 227
elem 228
elem 229
elem 230
elem 231
elem 232
elem 233
elem 234
elem 235
elem 236
elem 237
elem 238
elem 239
elem 240
elem 241
elem 242
elem 243
elem 244
elem 245
elem 246
elem 247
elem 248
elem 249
elem 250
elem 251
elem 252
elem 253
elem 254
elem 255
elem 256
elem 257
elem 258
elem 259
elem 260
elem 261
elem 262
elem 263
elem 264
elem 265
elem 266
elem 267
elem 268
elem 269
elem 270
elem 271
elem 272
elem 273
elem 274
elem 275
elem 276
elem 277
elem 278
elem 279
elem 280
elem 281
elem 282
elem 283
elem 284
elem 285
elem 286
elem 287
elem 288
elem 289
elem 290
elem 291
elem 292
elem 293
elem 294
elem 295
elem 296
elem 297
elem 298
elem 299
elem 300
elem 301
elem 302
elem 303
elem 304
elem 305
elem 306
elem 307
elem 308
elem 309
elem 310
elem 311
elem 312
elem 313
elem 314
elem 315
elem 316
elem 317
elem 318
elem 319
elem 320
elem 321
elem 322
elem 323
elem 324
elem 325
elem 326
elem 327
elem 328
elem 329
elem 330
elem 331
elem 332
elem 333
elem 334
elem 335
elem 336
elem 337
elem 338
elem 339
elem 340
elem 341
elem 342
elem 343
elem 344
elem 345
elem 346
elem 347
elem 348
elem 349
elem 350
elem 351
elem 352
elem 353
elem 354
elem 355
elem 356
elem 357
elem 358
elem 359
elem 360
elem 361
elem 362
elem 363
elem 364
elem 365
elem 366
elem 367
elem 368
elem 369
elem 370
elem 371
elem 372
elem 373
elem 374
elem 375
elem 376
elem 377
elem 378
elem 379
elem 380
elem 381
elem 382
elem 383
elem 384
elem 385
elem 386
elem 387
elem 388
elem 389
elem 390
elem 391
elem 392
elem 393
elem 394
elem 395
elem 396
elem 397
elem 398
elem 399
elem 400
elem 401
elem 402
elem 403
elem 404
elem 405
elem 406
elem 407
elem 408
elem 409
elem 410
elem 411
elem 412
elem 413
elem 414
elem 415
elem 416
elem 417
elem 418
elem 419
elem 420
elem 421
elem 422
elem 423
elem 424
elem 425
elem 426
elem 427
elem 428
elem 429
elem 430
elem 431
elem 432
elem 433
elem 434
elem 435
elem 436
elem 437
elem 438
elem 439
elem 440
elem 441
elem 442
elem 443
elem 444
elem 445
elem 446
elem 447
elem 448
elem 449
elem 450
elem 451
elem 452
elem 453
elem 454
elem 455
elem 456
elem 457
elem 458
elem 459
elem 460
elem 461
elem 462
elem 463
elem 464
elem 465
elem 466
elem 467
elem 468
elem 469
elem 470
elem 471
elem 472
elem 473
elem 474
elem 475
elem 476
elem 477
elem 478
elem 479
elem 480
elem 481
elem 482
elem 483
elem 484
elem 485
elem 486
elem 487
elem 488
elem 489
elem 490
elem 491
elem 492
elem 493
elem 494
elem 495
elem 496
elem 497
elem 498
elem 499
elem 500
elem 501
elem 502
elem 503
elem 504
elem 505
elem 506
elem 507
elem 508
elem 509
elem 510
elem 511
elem 512
elem 513
elem 514
elem 515
elem 516
elem 517
elem 518
elem 519
elem 520
elem 521
elem 522
elem 523
elem 524
elem 525
elem 526
elem 527
elem 528
elem 529
elem 530
elem 531
elem 532
elem 533
elem 534
elem 535
elem 536
elem 537
elem 538
elem 539
elem 540
elem 541
elem 542
elem 543
elem 544
elem 545
elem 546
elem 547
elem 548
elem 549
elem 550
elem 551
elem 552
elem 553
elem 554
elem 555
elem 556
elem 557
elem 558
elem 559
elem 560
elem 561
elem 562
elem 563
elem 564
elem 565
elem 566
elem 567
elem 568
elem 569
elem 570
elem 571
elem 572
elem 573
elem 574
elem 575
elem 576
elem 577
elem 578
elem 579
elem 580
elem 581
elem 582
elem 583
elem 584
elem 585
elem 586
elem 587
elem 588
elem 589
elem 590
elem 591
elem 592
elem 593
elem 594
elem 595
elem 596
elem 597
elem 598
elem 599
elem 600
elem 601
elem 602
elem 603
elem 604
elem 605
elem 606
elem 607
elem 608
elem 609
elem 610
elem 611
elem 612
elem 613
elem 614
elem 615
elem 616
elem 617
elem 618
elem 619
elem 620
elem 621
elem 622
elem 623
elem 624
elem 625
elem 626
elem 627
elem 628
elem 629
elem 630
elem 631
elem 632
elem 633
elem 634
elem 635
elem 636
elem 637
elem 638
elem 639
elem 640
elem 641
elem 642
elem 643
elem 644
elem 645
elem 646
elem 647
elem 648
elem 649
elem 650
elem 651
elem 652
elem 653
elem 654
elem 655
elem 656
elem 657
elem 658
elem 659
elem 660
elem 661
elem 662
elem 663
elem 664
elem 665
elem 666
elem 667
elem 668
elem 669
elem 670
elem 671
elem 672
elem 673
elem 674
elem 675
elem 676
elem 677
elem 678
elem 679
elem 680
elem 681
elem 682
elem 683
elem 684
elem 685
elem 686
elem 687
elem 688
elem 689
elem 690
elem 691
elem 692
elem 693
elem 694
elem 695
elem 696
elem 697
elem 698
elem 699
elem 700
elem 701
elem 702
elem 703
elem 704
elem 705
elem 706
elem 707
elem 708
elem 709
elem 710
elem 711
elem 712
elem 713
elem 714
elem 715
elem 716
elem 717
elem 718
elem 719
elem 720
elem 721
elem 722
elem 723
elem 724
elem 725
elem 726
elem 727
elem 728
elem 729
elem 730
elem 731
elem 732
elem 733
elem 734
elem 735
elem 736
elem 737
elem 738
elem 739
elem 740
elem 741
elem 742
elem 743
elem 744
elem 745
elem 746
elem 747
elem 748
elem 749
elem 750
elem 751
elem 752
elem 753
elem 754
elem 755
elem 756
elem 757
elem 758
elem 759
elem 760
elem 761
elem 762
elem 763
elem 764
elem 765
elem 766
elem 767
elem 768
elem 769
elem 770
elem 771
elem 772
elem 773
elem 774
elem 775
elem 776
elem 777
elem 778
elem 779
elem 780
elem 781
elem 782
elem 783
elem 784
elem 785
elem 786
elem 787
elem 788
elem 789
elem 790
elem 791
elem 792
elem 793
elem 794
elem 795
elem 796
elem 797
elem 798
elem 799
elem 800
elem 801
elem 802
elem 803
elem 804
elem 805
elem 806
elem 807
elem 808
elem 809
elem 810
elem 811
elem 812
elem 813
elem 814
elem 815
elem 816
elem 817
elem 818
elem 819
elem 820
elem 821
elem 822
elem 823
elem 824
elem 825
elem 826
elem 827
elem 828
elem 829
elem 830
elem 831
elem 832
elem 833
elem 834
elem 835
elem 836
elem 837
elem 838
elem 839
elem 840
elem 841
elem 842
elem 843
elem 844
elem 845
elem 846
elem 847
elem 848
elem 849
elem 850
elem 851
elem 852
elem 853
elem 854
elem 855
elem 856
elem 857
elem 858
elem 859
elem 860
elem 861
elem 862
elem 863
elem 864
elem 865
elem 866
elem 867
elem 868
elem 869
elem 870
elem 871
elem 872
elem 873
elem 874
elem 875
elem 876
elem 877
elem 878
elem 879
elem 880
elem 881
elem 882
elem 883
elem 884
elem 885
elem 886
elem 887
elem 888
elem 889
elem 890
elem 891
elem 892
elem 893
elem 894
elem 895
elem 896
elem 897
elem 898
elem 899
elem 900
elem 901
elem 902
elem 903
elem 904
elem 905
elem 906
elem 907
elem 908
elem 909
elem 910
elem 911
elem 912
elem 913
elem 914
elem 915
elem 916
elem 917
elem 918
elem 919
elem 920
elem 921
elem 922
elem 923
elem 924
elem 925
elem 926
elem 927
elem 928
elem 929
elem 930
elem 931
elem 932
elem 933
elem 934
elem 935
elem 936
elem 937
elem 938
elem 939
elem 940
elem 941
elem 942
elem 943
elem 944
elem 945
elem 946
elem 947
elem 948
elem 949
elem 950
elem 951
elem 952
elem 953
elem 954
elem 955
elem 956
elem 957
elem 958
elem 959
elem 960
elem 961
elem 962
elem 963
elem 964
elem 965
elem 966
elem 967
elem 968
elem 969
elem 970
elem 971
elem 972
elem 973
elem 974
elem 975
elem 976
elem 977
elem 978
elem 979
elem 980
elem 981
elem 982
elem 983
elem 984
elem 985
elem 986
elem 987
elem 988
elem 989
elem 990
elem 991
elem 992
elem 993
elem 994
elem 995
elem 996
elem 997
elem 998
elem 999
elem 1000
In this example there are
1000
elements
Optgroup
<select id='optgroup' multiple='multiple'>
<optgroup label='Friends'>
<option value='1'>Yoda</option>
<option value='2'>Obiwan</option>
</optgroup>
<optgroup label='Enemies'>
<option value='3'>Palpatine</option>
<option value='4'>Darth Vader</option>
</optgroup>
</select>$('#optgroup').multiSelect({ selectableOptgroup: true });
Yoda
Obiwan Palpatine
Darth Vader
Disabled attribute
<select id='disabled-attribute' disabled='disabled' 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>$('#disabled-attribute').multiSelect();
elem 1
elem 2
elem 3
elem 4
elem 5
elem 6
elem 7
elem 8
elem 9
elem 10
elem 11
elem 12
elem 13
elem 14
elem 15
elem 16
elem 17
elem 18
elem 19
elem 20
elem 21
elem 22
elem 23
elem 24
elem 25
elem 26
elem 27
elem 28
elem 29
elem 30
elem 31
elem 32
elem 33
elem 34
elem 35
elem 36
elem 37
elem 38
elem 39
elem 40
elem 41
elem 42
elem 43
elem 44
elem 45
elem 46
elem 47
elem 48
elem 49
elem 50
elem 51
elem 52
elem 53
elem 54
elem 55
elem 56
elem 57
elem 58
elem 59
elem 60
elem 61
elem 62
elem 63
elem 64
elem 65
elem 66
elem 67
elem 68
elem 69
elem 70
elem 71
elem 72
elem 73
elem 74
elem 75
elem 76
elem 77
elem 78
elem 79
elem 80
elem 81
elem 82
elem 83
elem 84
elem 85
elem 86
elem 87
elem 88
elem 89
elem 90
elem 91
elem 92
elem 93
elem 94
elem 95
elem 96
elem 97
elem 98
elem 99
elem 100
Note:
You can also deactivate option one by one by adding disabled attribute to each option you want to disable
<option value='fuu' disabled='disabled'>bar</option>
Custom headers and footers
<select id='custom-headers' 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>$('#custom-headers').multiSelect({
selectableHeader: "<div class='custom-header'>Selectable items</div>",
selectionHeader: "<div class='custom-header'>Selection items</div>",
selectableFooter: "<div class='custom-header'>Selectable footer</div>",
selectionFooter: "<div class='custom-header'>Selection footer</div>"
});
Searchable
Note:
This feature is not built-in but depends on an other plugin.
I personnally use the excellent
quicksearch
library, but you can use whatever library you like.
elem 1
elem 2
elem 3
elem 4
elem 5
elem 6
elem 7
elem 8
elem 9
elem 10
elem 11
elem 12
elem 13
elem 14
elem 15
elem 16
elem 17
elem 18
elem 19
elem 20
elem 21
elem 22
elem 23
elem 24
elem 25
elem 26
elem 27
elem 28
elem 29
elem 30
elem 31
elem 32
elem 33
elem 34
elem 35
elem 36
elem 37
elem 38
elem 39
elem 40
elem 41
elem 42
elem 43
elem 44
elem 45
elem 46
elem 47
elem 48
elem 49
elem 50
elem 51
elem 52
elem 53
elem 54
elem 55
elem 56
elem 57
elem 58
elem 59
elem 60
elem 61
elem 62
elem 63
elem 64
elem 65
elem 66
elem 67
elem 68
elem 69
elem 70
elem 71
elem 72
elem 73
elem 74
elem 75
elem 76
elem 77
elem 78
elem 79
elem 80
elem 81
elem 82
elem 83
elem 84
elem 85
elem 86
elem 87
elem 88
elem 89
elem 90
elem 91
elem 92
elem 93
elem 94
elem 95
elem 96
elem 97
elem 98
elem 99
elem 100
<select id='searchable' multiple='multiple'>
<option value='fr'>France</option>
<option value='uk'>United Kingdom</option>
<option value='us'>United States</option>
<option value='ch'>China</option>
</select>
<script src="path/to/jquery.multi-select.js" type="text/javascript"></script>
<script src="path/to/jquery.quicksearch.js" type="text/javascript"></script>$('#searchable').multiSelect({
selectableHeader: "<input type='text' id='search' autocomplete='off' placeholder='try \"elem 2\"'>"
});
$('#search').quicksearch($('.ms-elem-selectable', '#ms-searchable' )).on('keydown', function(e){
if (e.keyCode == 40){
$(this).trigger('focusout');
$('#searchable').focus();
return false;
}
});