jmultiselect2side.php改为asp,multiselect2side：jQuery多选列表框插件

Multiselect是一个采用jQuery实现的两边多选列表控件。可以将需要选定的项目从左边添加到右边的列表框中。或者将不需要的项目从右边列表框中删除。multiselect提供了一些属性的设置，selectedPosition：选择项的位置，默认为right，即最终获取选择的值是右边的列表框。moveOptions：移动选项，可以用来给选项排序，实际应用意义不大，这里设置为false。labelsx和labeldx是用来设置左右两个列表框的标题，如果不需要可设置为空。maxSelected：最大选项数，即最多只能选择几项。

Multiselect有以下功能特性：

可以将列表框左右两边的项进行移动(互换)。

可以通过双击事件移动列表框中的项。

可以设置已选项目的最大数。

可以自定义外观样式。

$(function(){

$("#selectedOption").multiselect2side({

selectedPosition: 'right',

moveOptions: false,

labelsx: '待选区',

labeldx: '已选区'

});

});

A

B

C

D

F

G

Senamion.com - multiselect2side (multiple select double side) plugin: documentation and demo page

$().ready(function() {

$('#searchable').multiselect2side({

search: "Search: "

});

$('#first').multiselect2side({

optGroupSearch: "Group: ",

search: ""

});

$('#second').multiselect2side({

selectedPosition: 'right',

moveOptions: false,

labelsx: '',

labeldx: '',

autoSort: true,

autoSortAvailable: true

});

$('#third').multiselect2side({

selectedPosition: 'left',

moveOptions: true,

labelTop: '+ +',

labelBottom: '- -',

labelUp: '+',

labelDown: '-',

labelsx: '* Selected *',

labeldx: '* Available *',

search: "Find: "

});

$('#fourth').multiselect2side({maxSelected: 4});

$('.clickToView2').click(function() {

$(this).parent().prevAll("select:first").toggle();

return false;

});

$('.clickToView').click(function() {

elClick = $(this);

selEl = elClick.prevAll("select:first");

$.ajax({

url: 'jmultiselect2side.php',

data: selEl.serialize() + '&SELECTNAME=' + selEl.attr("name"),

success: function(data) {

elClick.next().next().next().html(data);

}

});

return false;

});

$('#fourth')

.multiselect2side('addOption', {name: 'test selected', value: 'test1', selected: true})

.multiselect2side('addOption', {name: 'test not selected', value: 'test2', selected: false});

$('#third')

.multiselect2side('addOption', {name: 'test selected', value: 'test1', selected: true})

.multiselect2side('addOption', {name: 'test not selected', value: 'test2', selected: false});

//$('#third').multiselect2side('destroy');

});

JqueryJquery plugins

PortFolio

Senamion's PortFolio

HomeHome page

A jquery blog

Senamion.com

---

Senamion:

Categorie:

• Jquery

google_ad_client = "pub-3032806679313660";

/* senamion.com annunci barra */

google_ad_slot = "1100520536";

google_ad_width = 200;

google_ad_height = 90;

//-->

Archivi:

google_ad_client = "pub-3032806679313660";

/* senamion.com annunci barra big */

google_ad_slot = "3327814499";

google_ad_width = 160;

google_ad_height = 600;

//-->

multiselect2side plugin: documentation and demo page

Demo Search - Full demo select multiple double side with search option true (1000 elements)

Select multiple="multiple" modified by multiselect2side

Option strawberry 1 - India

Option apricot 2 - Italy

Option cherry 3 - USA

Option pineapple 4 - Holland

Option pineapple 5 - Mexico

Option pineapple 6 - Holland

Option pineapple 7 - USA

Option apricot 8 - India

Option pear 9 - Japan

Option melon 10 - Canada

Option melon 11 - Canada

Option melon 12 - China

Option apple 13 - Japan

Option orange 14 - Italy

Option cherry 15 - Canada

Option pear 16 - Germany

Option orange 17 - Italy

Option apricot 18 - Italy

Option orange 19 - Mexico

Option pineapple 20 - Germany

Option apricot 21 - USA

Option pear 22 - Mexico

Option pear 23 - India

Option pear 24 - Holland

Option apricot 25 - China

Option cherry 26 - Italy

Option apple 27 - USA

Option strawberry 28 - Italy

Option cherry 29 - Italy

Option orange 30 - Holland

Option pear 31 - France

Option pear 32 - Holland

Option melon 33 - Italy

Option pineapple 34 - Japan

Option pear 35 - Italy

Option melon 36 - USA

Option orange 37 - Japan

Option melon 38 - France

Option pineapple 39 - Germany

Option strawberry 40 - Canada

Option pineapple 41 - Germany

Option pear 42 - Japan

Option strawberry 43 - Canada

Option apricot 44 - Germany

Option pear 45 - China

Option pear 46 - Japan

Option pear 47 - Holland

Option orange 48 - Germany

Option pineapple 49 - Germany

Option pear 50 - India

Option cherry 51 - Germany

Option apple 52 - India

Option melon 53 - France

Option melon 54 - Italy

Option orange 55 - France

Option pear 56 - China

Option orange 57 - Holland

Option melon 58 - USA

Option cherry 59 - USA

Option strawberry 60 - Italy

Option strawberry 61 - USA

Option apricot 62 - Canada

Option apricot 63 - China

Option strawberry 64 - Canada

Option pineapple 65 - Mexico

Option orange 66 - Mexico

Option apple 67 - USA

Option pear 68 - France

Option apricot 69 - Germany

Option melon 70 - China

Option orange 71 - Germany

Option apricot 72 - Mexico

Option pear 73 - Italy

Option pineapple 74 - USA

Option orange 75 - France

Option orange 76 - USA

Option pineapple 77 - China

Option pear 78 - Mexico

Option apricot 79 - Mexico

Option pineapple 80 - Canada

Option apricot 81 - Germany

Option apricot 82 - Germany

Option strawberry 83 - India

Option orange 84 - Holland

Option cherry 85 - Germany

Option melon 86 - India

Option melon 87 - USA

Option pear 88 - China

Option orange 89 - China

Option strawberry 90 - France

Option pear 91 - USA

Option pineapple 92 - India

Option apple 93 - India

Option pear 94 - Germany

Option pear 95 - China

Option apple 96 - India

Option apricot 97 - Germany

Option apricot 98 - Holland

Option apricot 99 - India

Option orange 100 - France

Option apricot 101 - Japan

Option melon 102 - USA

Option cherry 103 - Germany

Option strawberry 104 - Italy

Option pineapple 105 - India

Option melon 106 - India

Option apple 107 - Italy

Option strawberry 108 - Italy

Option strawberry 109 - USA

Option cherry 110 - Canada

Option apple 111 - China

Option orange 112 - Germany

Option pineapple 113 - China

Option pear 114 - Canada

Option apricot 115 - Holland

Option apricot 116 - Mexico

Option orange 117 - USA

Option pineapple 118 - India

Option cherry 119 - France

Option strawberry 120 - France

Option pear 121 - Mexico

Option melon 122 - France

Option pear 123 - Mexico

Option melon 124 - Mexico

Option pineapple 125 - Canada

Option pineapple 126 - Holland

Option orange 127 - Japan

Option pear 128 - Germany

Option melon 129 - Japan

Option apple 130 - USA

Option orange 131 - Germany

Option pineapple 132 - Canada

Option cherry 133 - Italy

Option orange 134 - Japan

Option pineapple 135 - USA

Option orange 136 - China

Option melon 137 - Holland

Option pear 138 - China

Option cherry 139 - Germany

Option orange 140 - Mexico

Option apple 141 - Japan

Option strawberry 142 - USA

Option pear 143 - Canada

Option strawberry 144 - Germany

Option strawberry 145 - India

Option strawberry 146 - Italy

Option apricot 147 - France

Option pear 148 - Holland

Option pineapple 149 - France

Option orange 150 - Italy

Option pineapple 151 - Mexico

Option strawberry 152 - Italy

Option strawberry 153 - USA

Option strawberry 154 - Germany

Option strawberry 155 - Italy

Option apple 156 - India

Option apricot 157 - Italy

Option apple 158 - India

Option pear 159 - Italy

Option apricot 160 - USA

Option strawberry 161 - Japan

Option orange 162 - Japan

Option orange 163 - France

Option orange 164 - Japan

Option strawberry 165 - Mexico

Option apricot 166 - Holland

Option apricot 167 - Holland

Option pineapple 168 - Holland

Option cherry 169 - Holland

Option pear 170 - Japan

Option pineapple 171 - France

Option pineapple 172 - Canada

Option melon 173 - Germany

Option orange 174 - Germany

Option cherry 175 - India

Option strawberry 176 - Germany

Option apricot 177 - USA

Option pear 178 - Germany

Option pineapple 179 - Holland

Option melon 180 - Holland

Option cherry 181 - Italy

Option apple 182 - Holland

Option apricot 183 - Japan

Option orange 184 - Mexico

Option orange 185 - Holland

Option apple 186 - Germany

Option strawberry 187 - Japan

Option apple 188 - France

Option melon 189 - Canada

Option orange 190 - USA

Option pear 191 - USA

Option cherry 192 - China

Option pear 193 - Canada

Option apricot 194 - India

Option apricot 195 - Italy

Option melon 196 - Japan

Option apple 197 - Holland

Option orange 198 - Germany

Option pear 199 - Mexico

Option orange 200 - France

Option cherry 201 - Canada

Option pear 202 - China

Option strawberry 203 - Mexico

Option pear 204 - Canada

Option pineapple 205 - Holland

Option melon 206 - China

Option apricot 207 - Canada

Option apricot 208 - Italy

Option pineapple 209 - Mexico

Option strawberry 210 - Canada

Option melon 211 - France

Option cherry 212 - Holland

Option apple 213 - Italy

Option pear 214 - Canada

Option melon 215 - Holland

Option cherry 216 - Canada

Option apricot 217 - Italy

Option apple 218 - Japan

Option pear 219 - Mexico

Option strawberry 220 - India

Option strawberry 221 - Mexico

Option cherry 222 - Japan

Option apricot 223 - Holland

Option apricot 224 - USA

Option strawberry 225 - Japan

Option melon 226 - Mexico

Option orange 227 - Canada

Option strawberry 228 - USA

Option pear 229 - Canada

Option melon 230 - Germany

Option cherry 231 - Canada

Option apple 232 - France

Option pear 233 - USA

Option orange 234 - Japan

Option pineapple 235 - Italy

Option pineapple 236 - France

Option melon 237 - Mexico

Option apple 238 - Italy

Option strawberry 239 - Germany

Option orange 240 - Germany

Option melon 241 - Japan

Option orange 242 - Holland

Option strawberry 243 - Italy

Option apricot 244 - Canada

Option pear 245 - Canada

Option apple 246 - USA

Option melon 247 - Italy

Option pineapple 248 - Germany

Option orange 249 - Germany

Option melon 250 - Germany

Option cherry 251 - India

Option orange 252 - USA

Option pear 253 - Canada

Option orange 254 - USA

Option strawberry 255 - France

Option strawberry 256 - Mexico

Option apple 257 - USA

Option strawberry 258 - India

Option orange 259 - Japan

Option orange 260 - Holland

Option cherry 261 - Canada

Option apricot 262 - Mexico

Option orange 263 - Mexico

Option apple 264 - France

Option apple 265 - France

Option orange 266 - China

Option melon 267 - Mexico

Option apple 268 - Japan

Option pineapple 269 - Canada

Option cherry 270 - France

Option apricot 271 - China

Option cherry 272 - Germany

Option strawberry 273 - Germany

Option apricot 274 - USA

Option melon 275 - China

Option apricot 276 - Mexico

Option apple 277 - France

Option apricot 278 - Mexico

Option apricot 279 - Germany

Option cherry 280 - Germany

Option orange 281 - India

Option apricot 282 - Holland

Option orange 283 - Japan

Option orange 284 - Germany

Option strawberry 285 - Italy

Option pear 286 - Japan

Option strawberry 287 - USA

Option melon 288 - China

Option strawberry 289 - USA

Option strawberry 290 - Mexico

Option apple 291 - Japan

Option apricot 292 - USA

Option apple 293 - Mexico

Option melon 294 - China

Option apple 295 - Canada

Option pineapple 296 - Canada

Option orange 297 - Canada

Option cherry 298 - France

Option strawberry 299 - Italy

Option orange 300 - China

Option orange 301 - France

Option pineapple 302 - Italy

Option pineapple 303 - India

Option cherry 304 - France

Option orange 305 - China

Option cherry 306 - USA

Option melon 307 - Holland

Option pear 308 - Holland

Option strawberry 309 - Germany

Option melon 310 - Italy

Option apple 311 - India

Option pear 312 - USA

Option orange 313 - USA

Option pineapple 314 - USA

Option pear 315 - Germany

Option apple 316 - France

Option orange 317 - Holland

Option pineapple 318 - Germany

Option pineapple 319 - Mexico

Option orange 320 - Japan

Option orange 321 - Italy

Option cherry 322 - Japan

Option apricot 323 - USA

Option pear 324 - Holland

Option strawberry 325 - Japan

Option apricot 326 - China

Option pineapple 327 - India

Option apple 328 - China

Option orange 329 - Japan

Option strawberry 330 - France

Option melon 331 - India

Option strawberry 332 - Japan

Option pineapple 333 - France

Option melon 334 - USA

Option cherry 335 - Japan

Option cherry 336 - India

Option cherry 337 - Japan

Option apricot 338 - France

Option cherry 339 - India

Option apple 340 - Japan

Option pineapple 341 - Japan

Option pineapple 342 - USA

Option apricot 343 - Japan

Option apple 344 - China

Option pear 345 - India

Option pear 346 - Germany

Option strawberry 347 - Canada

Option melon 348 - France

Option pineapple 349 - India

Option pineapple 350 - France

Option pineapple 351 - Mexico

Option melon 352 - Mexico

Option apple 353 - Italy

Option cherry 354 - China

Option strawberry 355 - China

Option melon 356 - Holland

Option melon 357 - Italy

Option apricot 358 - USA

Option apricot 359 - Japan

Option strawberry 360 - Italy

Option apricot 361 - Canada

Option cherry 362 - Holland

Option melon 363 - Canada

Option apple 364 - USA

Option orange 365 - Holland

Option pineapple 366 - Germany

Option strawberry 367 - India

Option orange 368 - India

Option strawberry 369 - India

Option apricot 370 - India

Option apricot 371 - Canada

Option melon 372 - Canada

Option pear 373 - USA

Option melon 374 - Italy

Option cherry 375 - Mexico

Option apple 376 - France

Option apricot 377 - China

Option apple 378 - USA

Option orange 379 - Italy

Option pear 380 - Mexico

Option pineapple 381 - Germany

Option orange 382 - France

Option apricot 383 - Mexico

Option melon 384 - Japan

Option pear 385 - USA

Option pineapple 386 - India

Option pear 387 - India

Option orange 388 - Japan

Option apple 389 - Holland

Option apricot 390 - India

Option strawberry 391 - Japan

Option melon 392 - Japan

Option pineapple 393 - France

Option cherry 394 - Germany

Option melon 395 - Italy

Option orange 396 - Italy

Option cherry 397 - Mexico

Option pineapple 398 - Holland

Option apricot 399 - India

Option orange 400 - India

Option apple 401 - Germany

Option strawberry 402 - Mexico

Option apricot 403 - USA

Option apple 404 - China

Option apricot 405 - Japan

Option cherry 406 - Japan

Option pear 407 - Canada

Option pear 408 - India

Option apricot 409 - Italy

Option apricot 410 - USA

Option apple 411 - China

Option orange 412 - India

Option orange 413 - Germany

Option melon 414 - China

Option apricot 415 - Japan

Option apricot 416 - Germany

Option pear 417 - Japan

Option orange 418 - Italy

Option apricot 419 - USA

Option strawberry 420 - France

Option cherry 421 - Germany

Option orange 422 - USA

Option strawberry 423 - France

Option apple 424 - Japan

Option melon 425 - Germany

Option cherry 426 - Holland

Option pineapple 427 - India

Option pineapple 428 - Germany

Option apricot 429 - India

Option pineapple 430 - France

Option pineapple 431 - Mexico

Option orange 432 - India

Option strawberry 433 - Mexico

Option apple 434 - Germany

Option pineapple 435 - India

Option orange 436 - Mexico

Option apricot 437 - Canada

Option melon 438 - Germany

Option apricot 439 - Holland

Option pear 440 - Canada

Option pear 441 - USA

Option cherry 442 - China

Option apple 443 - Mexico

Option apricot 444 - China

Option pear 445 - Canada

Option pear 446 - China

Option pineapple 447 - Holland

Option apricot 448 - Holland

Option cherry 449 - Germany

Option orange 450 - Mexico

Option apricot 451 - Mexico

Option apricot 452 - France

Option apricot 453 - USA

Option orange 454 - France

Option apricot 455 - Holland

Option pineapple 456 - Italy

Option pineapple 457 - France

Option cherry 458 - Germany

Option apricot 459 - Holland

Option pineapple 460 - India

Option apricot 461 - China

Option cherry 462 - Canada

Option melon 463 - Holland

Option cherry 464 - Canada

Option pear 465 - Italy

Option apricot 466 - Italy

Option melon 467 - Mexico

Option melon 468 - USA

Option pineapple 469 - Japan

Option pineapple 470 - Canada

Option orange 471 - USA

Option pear 472 - Germany

Option pineapple 473 - USA

Option melon 474 - Canada

Option apricot 475 - Italy

Option orange 476 - Mexico

Option strawberry 477 - Italy

Option apricot 478 - Mexico

Option pineapple 479 - France

Option apricot 480 - China

Option pineapple 481 - Canada

Option cherry 482 - India

Option apricot 483 - Mexico

Option apple 484 - Canada

Option strawberry 485 - Japan

Option pineapple 486 - Italy

Option cherry 487 - Germany

Option cherry 488 - Mexico

Option strawberry 489 - Mexico

Option pineapple 490 - Japan

Option melon 491 - China

Option apple 492 - France

Option cherry 493 - Germany

Option cherry 494 - Mexico

Option orange 495 - France

Option orange 496 - Germany

Option apricot 497 - India

Option apricot 498 - Mexico

Option pear 499 - Germany

Option pineapple 500 - Canada

Option melon 501 - Italy

Option pear 502 - USA

Option cherry 503 - USA

Option melon 504 - China

Option melon 505 - Italy

Option melon 506 - India

Option cherry 507 - France

Option pear 508 - Japan

Option orange 509 - USA

Option apple 510 - Mexico

Option pineapple 511 - USA

Option apple 512 - Canada

Option apple 513 - Germany

Option pineapple 514 - Mexico

Option pineapple 515 - USA

Option pineapple 516 - India

Option orange 517 - China

Option apple 518 - Italy

Option apple 519 - Holland

Option cherry 520 - Holland

Option apricot 521 - Canada

Option melon 522 - Holland

Option apricot 523 - China

Option orange 524 - India

Option strawberry 525 - USA

Option pear 526 - France

Option pear 527 - Mexico

Option apricot 528 - France

Option orange 529 - Mexico

Option cherry 530 - Germany

Option melon 531 - France

Option apricot 532 - Japan

Option pear 533 - Germany

Option pineapple 534 - Mexico

Option pear 535 - France

Option strawberry 536 - Italy

Option apricot 537 - Mexico

Option pineapple 538 - France

Option orange 539 - Germany

Option pear 540 - USA

Option strawberry 541 - Japan

Option pineapple 542 - Canada

Option strawberry 543 - Mexico

Option apricot 544 - USA

Option apricot 545 - Holland

Option cherry 546 - Italy

Option strawberry 547 - France

Option apricot 548 - Mexico

Option pear 549 - Mexico

Option apricot 550 - Japan

Option cherry 551 - Japan

Option apricot 552 - France

Option strawberry 553 - USA

Option strawberry 554 - USA

Option strawberry 555 - Canada

Option pear 556 - China

Option strawberry 557 - China

Option apple 558 - China

Option orange 559 - Germany

Option strawberry 560 - China

Option pear 561 - China

Option strawberry 562 - Mexico

Option pear 563 - Japan

Option pineapple 564 - Holland

Option strawberry 565 - Mexico

Option orange 566 - Germany

Option strawberry 567 - China

Option orange 568 - India

Option apple 569 - USA

Option apple 570 - India

Option pear 571 - Mexico

Option apricot 572 - Canada

Option pear 573 - China

Option orange 574 - France

Option pineapple 575 - USA

Option pear 576 - India

Option strawberry 577 - Canada

Option orange 578 - Canada

Option strawberry 579 - China

Option cherry 580 - China

Option orange 581 - India

Option pineapple 582 - Italy

Option cherry 583 - Germany

Option strawberry 584 - China

Option cherry 585 - Italy

Option apricot 586 - Canada

Option melon 587 - France

Option melon 588 - Japan

Option pear 589 - Japan

Option orange 590 - China

Option apricot 591 - France

Option cherry 592 - Japan

Option cherry 593 - Italy

Option strawberry 594 - Germany

Option strawberry 595 - Germany

Option pineapple 596 - Italy

Option apricot 597 - USA

Option orange 598 - Holland

Option strawberry 599 - USA

Option melon 600 - Germany

Option orange 601 - USA

Option strawberry 602 - Japan

Option pineapple 603 - France

Option pear 604 - China

Option apple 605 - France

Option cherry 606 - Germany

Option strawberry 607 - Holland

Option melon 608 - Germany

Option apricot 609 - France

Option melon 610 - Japan

Option orange 611 - Italy

Option apricot 612 - India

Option orange 613 - China

Option melon 614 - Italy

Option apple 615 - China

Option cherry 616 - Canada

Option strawberry 617 - Germany

Option strawberry 618 - Holland

Option orange 619 - Canada

Option melon 620 - Canada

Option apricot 621 - USA

Option apple 622 - Japan

Option apricot 623 - France

Option pear 624 - France

Option strawberry 625 - China

Option apple 626 - Italy

Option cherry 627 - Germany

Option strawberry 628 - India

Option pineapple 629 - France

Option apple 630 - Japan

Option pear 631 - China

Option strawberry 632 - Canada

Option pineapple 633 - China

Option cherry 634 - Germany

Option apple 635 - USA

Option strawberry 636 - Germany

Option pear 637 - India

Option pear 638 - Italy

Option melon 639 - Germany

Option melon 640 - Mexico

Option pineapple 641 - France

Option melon 642 - Mexico

Option orange 643 - Mexico

Option pear 644 - Germany

Option cherry 645 - Mexico

Option pear 646 - Italy

Option orange 647 - Canada

Option pear 648 - Germany

Option apple 649 - Italy

Option pineapple 650 - Italy

Option orange 651 - Holland

Option cherry 652 - France

Option pineapple 653 - USA

Option melon 654 - India

Option cherry 655 - China

Option pear 656 - Mexico

Option pear 657 - Germany

Option apricot 658 - France

Option apple 659 - Italy

Option orange 660 - China

Option melon 661 - France

Option strawberry 662 - Japan

Option apricot 663 - USA

Option melon 664 - Germany

Option orange 665 - India

Option cherry 666 - Mexico

Option melon 667 - Holland

Option cherry 668 - India

Option apricot 669 - Canada

Option strawberry 670 - Holland

Option apple 671 - Canada

Option strawberry 672 - France

Option apple 673 - Germany

Option cherry 674 - USA

Option cherry 675 - India

Option apple 676 - Canada

Option melon 677 - India

Option strawberry 678 - USA

Option orange 679 - Mexico

Option strawberry 680 - Mexico

Option pear 681 - Germany

Option apricot 682 - China

Option pear 683 - Holland

Option cherry 684 - Italy

Option cherry 685 - Germany

Option apricot 686 - China

Option apple 687 - Holland

Option pear 688 - Italy

Option pear 689 - USA

Option orange 690 - Italy

Option apple 691 - Canada

Option pear 692 - Holland

Option orange 693 - Canada

Option apricot 694 - Mexico

Option apricot 695 - Japan

Option apricot 696 - Italy

Option pear 697 - France

Option cherry 698 - Japan

Option strawberry 699 - Japan

Option apricot 700 - Germany

Option melon 701 - Mexico

Option apricot 702 - France

Option strawberry 703 - India

Option pineapple 704 - Canada

Option apple 705 - Germany

Option pear 706 - USA

Option apple 707 - Germany

Option apricot 708 - Canada

Option apple 709 - France

Option pineapple 710 - Japan

Option apple 711 - Canada

Option apricot 712 - France

Option apricot 713 - Holland

Option orange 714 - Japan

Option orange 715 - China

Option melon 716 - Japan

Option pear 717 - USA

Option apple 718 - Canada

Option apple 719 - Holland

Option melon 720 - USA

Option pear 721 - China

Option pear 722 - Mexico

Option pineapple 723 - Italy

Option pineapple 724 - Holland

Option melon 725 - USA

Option orange 726 - Holland

Option melon 727 - India

Option apple 728 - USA

Option melon 729 - USA

Option cherry 730 - Germany

Option apple 731 - Canada

Option pear 732 - Mexico

Option melon 733 - Mexico

Option pineapple 734 - France

Option strawberry 735 - Italy

Option pineapple 736 - Canada

Option cherry 737 - China

Option pineapple 738 - Mexico

Option strawberry 739 - Italy

Option cherry 740 - France

Option orange 741 - Italy

Option apple 742 - Japan

Option strawberry 743 - Italy

Option apricot 744 - France

Option pear 745 - Holland

Option orange 746 - Mexico

Option cherry 747 - France

Option apricot 748 - Canada

Option cherry 749 - Canada

Option apricot 750 - Germany

Option orange 751 - Canada

Option strawberry 752 - Italy

Option orange 753 - Holland

Option pear 754 - Italy

Option pineapple 755 - USA

Option melon 756 - Germany

Option orange 757 - France

Option melon 758 - USA

Option pineapple 759 - USA

Option pineapple 760 - Germany

Option apricot 761 - Germany

Option apple 762 - Holland

Option pear 763 - Germany

Option cherry 764 - USA

Option strawberry 765 - France

Option strawberry 766 - USA

Option apricot 767 - China

Option orange 768 - China

Option melon 769 - Holland

Option strawberry 770 - Italy

Option apricot 771 - Mexico

Option cherry 772 - India

Option cherry 773 - Canada

Option apple 774 - Mexico

Option pear 775 - Germany

Option orange 776 - Italy

Option melon 777 - Canada

Option pineapple 778 - Germany

Option apple 779 - Mexico

Option strawberry 780 - Italy

Option cherry 781 - Germany

Option pear 782 - Holland

Option apricot 783 - France

Option melon 784 - Italy

Option apple 785 - Canada

Option apple 786 - Germany

Option apricot 787 - India

Option apricot 788 - France

Option apple 789 - China

Option cherry 790 - France

Option pineapple 791 - Italy

Option melon 792 - India

Option pear 793 - Italy

Option apricot 794 - France

Option melon 795 - Japan

Option melon 796 - Canada

Option melon 797 - Germany

Option cherry 798 - Italy

Option orange 799 - USA

Option orange 800 - Canada

Option melon 801 - Canada

Option apple 802 - Italy

Option orange 803 - Germany

Option pineapple 804 - Canada

Option pineapple 805 - Mexico

Option apricot 806 - Italy

Option melon 807 - Canada

Option apple 808 - Germany

Option pear 809 - Germany

Option orange 810 - Japan

Option melon 811 - Japan

Option strawberry 812 - China

Option melon 813 - Japan

Option cherry 814 - Japan

Option cherry 815 - Italy

Option strawberry 816 - Canada

Option pear 817 - India

Option pear 818 - France

Option cherry 819 - China

Option cherry 820 - Mexico

Option orange 821 - Holland

Option melon 822 - Holland

Option apricot 823 - Holland

Option pear 824 - India

Option pear 825 - France

Option apricot 826 - Germany

Option apple 827 - Holland

Option pineapple 828 - France

Option pear 829 - France

Option apple 830 - Italy

Option melon 831 - Italy

Option pear 832 - Germany

Option apple 833 - Japan

Option orange 834 - Germany

Option melon 835 - India

Option orange 836 - Holland

Option melon 837 - Japan

Option orange 838 - USA

Option orange 839 - France

Option orange 840 - France

Option strawberry 841 - China

Option orange 842 - India

Option melon 843 - Germany

Option melon 844 - Japan

Option orange 845 - France

Option cherry 846 - Holland

Option melon 847 - USA

Option pear 848 - France

Option apricot 849 - France

Option pear 850 - USA

Option melon 851 - France

Option apricot 852 - India

Option apple 853 - China

Option apple 854 - USA

Option pear 855 - Canada

Option apricot 856 - Canada

Option orange 857 - China

Option orange 858 - Holland

Option pineapple 859 - Holland

Option orange 860 - Japan

Option apple 861 - Italy

Option orange 862 - Holland

Option orange 863 - Holland

Option apple 864 - China

Option apple 865 - Canada

Option strawberry 866 - France

Option apricot 867 - Germany

Option melon 868 - Germany

Option pineapple 869 - Holland

Option strawberry 870 - India

Option cherry 871 - Holland

Option orange 872 - India

Option melon 873 - Canada

Option pineapple 874 - India

Option cherry 875 - Germany

Option apricot 876 - China

Option cherry 877 - China

Option melon 878 - India

Option melon 879 - Mexico

Option cherry 880 - France

Option apricot 881 - Germany

Option strawberry 882 - France

Option melon 883 - Mexico

Option orange 884 - Italy

Option strawberry 885 - USA

Option strawberry 886 - Germany

Option apricot 887 - Italy

Option apricot 888 - USA

Option melon 889 - USA

Option orange 890 - Canada

Option strawberry 891 - Germany

Option apple 892 - Germany

Option apricot 893 - France

Option pineapple 894 - Italy

Option cherry 895 - Mexico

Option melon 896 - Holland

Option apple 897 - France

Option strawberry 898 - Holland

Option cherry 899 - USA

Option pineapple 900 - Germany

Option pear 901 - Holland

Option melon 902 - Italy

Option apricot 903 - Italy

Option orange 904 - Italy

Option pear 905 - Mexico

Option pear 906 - Canada

Option apple 907 - Mexico

Option strawberry 908 - Germany

Option cherry 909 - Holland

Option apricot 910 - Japan

Option strawberry 911 - Canada

Option orange 912 - Italy

Option apricot 913 - USA

Option pineapple 914 - Holland

Option pear 915 - USA

Option orange 916 - Holland

Option apricot 917 - Japan

Option pineapple 918 - Mexico

Option cherry 919 - China

Option melon 920 - Italy

Option apple 921 - Japan

Option orange 922 - USA

Option apple 923 - USA

Option strawberry 924 - China

Option apricot 925 - Japan

Option pineapple 926 - Holland

Option strawberry 927 - Germany

Option pineapple 928 - Holland

Option strawberry 929 - USA

Option apple 930 - Canada

Option pear 931 - Mexico

Option strawberry 932 - Italy

Option apple 933 - Holland

Option melon 934 - Germany

Option pear 935 - Germany

Option cherry 936 - France

Option melon 937 - Italy

Option apricot 938 - France

Option orange 939 - Holland

Option pear 940 - China

Option orange 941 - China

Option melon 942 - Italy

Option pineapple 943 - Italy

Option apricot 944 - Holland

Option orange 945 - Germany

Option strawberry 946 - France

Option apple 947 - Germany

Option pineapple 948 - USA

Option pear 949 - India

Option strawberry 950 - Japan

Option apricot 951 - Germany

Option apple 952 - USA

Option cherry 953 - Germany

Option pineapple 954 - India

Option orange 955 - India

Option cherry 956 - France

Option cherry 957 - Canada

Option melon 958 - Mexico

Option pear 959 - USA

Option strawberry 960 - France

Option strawberry 961 - China

Option strawberry 962 - Italy

Option apricot 963 - France

Option orange 964 - India

Option pear 965 - USA

Option pineapple 966 - Italy

Option cherry 967 - Japan

Option orange 968 - Japan

Option melon 969 - China

Option pineapple 970 - Japan

Option cherry 971 - France

Option apple 972 - Holland

Option apricot 973 - Holland

Option strawberry 974 - India

Option apricot 975 - India

Option melon 976 - Japan

Option cherry 977 - France

Option apricot 978 - Holland

Option cherry 979 - India

Option melon 980 - Canada

Option apple 981 - Italy

Option pear 982 - China

Option cherry 983 - Holland

Option melon 984 - USA

Option melon 985 - Italy

Option cherry 986 - USA

Option melon 987 - China

Option apricot 988 - USA

Option melon 989 - Japan

Option orange 990 - USA

Option pineapple 991 - Holland

Option cherry 992 - France

Option strawberry 993 - Holland

Option strawberry 994 - China

Option melon 995 - France

Option apple 996 - France

Option pineapple 997 - Mexico

Option pear 998 - Mexico

Option strawberry 999 - China

Option melon 1000 - Mexico

Click here to test the select above

Result of a php print_r() function:

---

Click here to hide/show original select

This is the javascript code to launch multiselect2side to #searchable select:

$().ready(function() {

$('#searchable').multiselect2side({'search': 'Search: '});

});

Demo 1 - Full demo select multiple double side

Select multiple="multiple" modified by multiselect2side

First Option

Option 2th

Option selected 3

Option 14

Option 15

Option 16

Option selected 17

Option 18

Option 24

Option 25

Option 26

Option selected 27

Option 28

Option 34

Option 35

Option 36

Option 37

Option 38

Option 41

Option 42

Option 43

Option 44

Option 45

Option 46

Option 47

Option 48

Click here to test the select above

Result of a php print_r() function:

---

Click here to hide/show original select

This is the javascript code to launch multiselect2side to #first select:

$().ready(function() {

$('#first').multiselect2side({

optGroupSearch: "Group: ",

search: ""

});

});

Demo 2 - select multiple double side - moveOptions: false, autoSort: true

Move buttons are disabled but is enable autoSort. Header label not present.

Option a 1

Option b 2(sel)

Option c 3

Option d 4 (sel)

Option e 5

Option f 6

Option g 7

Option h 8

Option i 9

Option l 10 (sel)

Click here to test the select above

Result of a php print_r() function:

---

Click here to hide/show original select

This is the javascript code to launch multiselect2side to #second select:

$().ready(function() {

$('#second').multiselect2side({

selectedPosition: 'right',

moveOptions: false,

labelsx: '',

labeldx: '',

autoSort: true,

autoSortAvailable: true

});

});

Demo 3 - select multiple double side - selectedPosition: 'left'

Elements selected are in the left, label of move buttoms are modified.

1Option 1

Option 2 (sel)

a Option 3

This Option 4 (sel)

Optaion 5

Option 6

Odption 7

Optaion 8

Optdion 9

Option 10 (sel)

Click here to test the select above

Result of a php print_r() function:

---

Click here to hide/show original select

This is the javascript code to launch multiselect2side to #third select:

$().ready(function() {

$('#third').multiselect2side({

selectedPosition: 'left',

moveOptions: true,

labelTop: '+ +',

labelBottom: '- -',

labelUp: '+',

labelDown: '-',

labelsx: '* Selected *',

labeldx: '* Available *',

search: "Find: "

});

$('#third')

.multiselect2side('addOption', {name: 'test selected', value: 'test1', selected: true})

.multiselect2side('addOption', {name: 'test not selected', value: 'test2', selected: false});

});

Demo 4 - Select multiple double side with limited number of selectionable options

Select multiple="multiple" with parameter maxSelected, selectionable options limited to 4

First Option

Option 2th

Option selected 3

Option 4

Option 5

Option 6

Option selected 7

Option 8

Click here to test the select above

Result of a php print_r() function:

---

Click here to hide/show original select

This is the javascript code to launch multiselect2side to #fourth select:

$().ready(function() {

$('#fourth').multiselect2side({maxSelected: 4});

$('#fourth')

.multiselect2side('addOption', {name: 'test selected', value: 'test1', selected: true})

.multiselect2side('addOption', {name: 'test not selected', value: 'test2', selected: false});

});

Documentation

To use this jquery plugin:

• include the js in the head section of the page:

  ...

  ...

• in the read function launch the multiselect2side (select multiple double side) relative at your element:

  $().ready(function() {

  $("select").multiselect2side();

  });

For comments see the blog page.

Options:

• optGroupSearch - use optgroup label to select elements - default false
• minSize - default minSize of selects - default 6
• selectedPosition - position of selected elements - default 'right'
• moveOptions - show move options - default true
• labelTop - label of top buttom - default 'Top'
• labelBottom - label of bottom buttom - default 'Bottom'
• labelUp - label of up buttom - default 'Up'
• labelDown - label of down buttom - default 'Down'
• labelSort - label of sort buttom - default 'Sort'
• maxSelected - number of max selectable options
• labelsx: Left label - default '* Selected *'
• labeldx: Right label - default '* Available *'
• autoSort: Automatic sort of selected options - default false
• autoSortAvailable: Automatic sort of available options - default false
• search: string for add search funcionality - default false = no search
• caseSensitive: type of search - default false
• delay: the delay in milliseconds the search option waits after a keystroke to activate itself - default 200

Methods:

• destroy - destroy multiselect2side
• addOption - add option to select(s). See example #fourth and #third selects above. Options:
  • name: name of new value
  • value: value of new value
  • selected: if true option is inserted in "selected" list, else in "available"

Download

You can download the entire archive:

• jquery.multiselect2side.zip -

  a zip archive containing the plugin source, a minified version of jQuery and a demo page.

Or single file:

• jquery.multiselect2side.js - js code.
• jquery.multiselect2side.css - css code.
• close.gif - close icon.
• loading.gif - loading icon.
• search.gif - search icon.

Release

• 1.1 - May 04 2011 - correct some little bugs
• 1.0 - Apr 04 2011 - new optGroupSearch and minSize options, new methods destroy and addOption
• 0.16 - Mar 15 2011 - new autoSortAvailable option
• 0.15 - Mar 14 2011 - new search options
• 0.14 - Feb 2 2011 - correct FF autoSort bug
• 0.13 - Jan 26 2011 - new autoSort parameter
• 0.12 - Nov 19 2010 - correct opera bug + new demo
• 0.11 - Aug 26 2010 - correct ie6 bug
• 0.10 - Jul 20 2010 - correct ie8 bug (padding-top)
• 0.9 - Jul 16 2010 - new labels button (left and right label)
• 0.8 - May 17 2010 - new sort button (if moveOptions is true)
• 0.7 - May 16 2010 - correct order options bug
• 0.6 - Avr 16 2010 - correct bug with optgroup
• 0.5 - Avr 15 2010 - Now move and updown options are vertically centered
• 0.4 - Avr 12 2010 - New option maxSelected
• 0.3 - Avr 1 2010 - New CSS
• 0.2 - Mar 25 2010 - New parameters moveOptions (default true)
• 0.1 - Mar 22 2010 - New parameters selectedPosition (default 'right')
• 0.0 - Feb 19 2010 - First release of multiselect2side (select multiple double side)

License

Dual licensed under the MIT and GPL licenses.

google_ad_client = "pub-3032806679313660";

/* senamion.com sopra commenti */

google_ad_slot = "6790031380";

google_ad_width = 468;

google_ad_height = 60;

//-->

Articles (RSS)

e Comments (RSS).

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

try {

var pageTracker = _gat._getTracker("UA-403821-11");

pageTracker._trackPageview();

} catch(err) {}

/*

* multiselect2side jQuery plugin

*

* Copyright (c) 2010 Giovanni Casassa (senamion.com - senamion.it)

*

* Dual licensed under the MIT (MIT-LICENSE.txt)

* and GPL (GPL-LICENSE.txt) licenses.

*

* http://www.senamion.com

*

*/

(function($)

{

// SORT INTERNAL

function internalSort(a, b) {

var compA = $(a).text().toUpperCase();

var compB = $(b).text().toUpperCase();

return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;

};

var methods = {

init : function(options) {

var o = {

selectedPosition: 'right',

moveOptions: true,

labelTop: 'Top',

labelBottom: 'Bottom',

labelUp: 'Up',

labelDown: 'Down',

labelSort: 'Sort',

labelsx: 'Available',

labeldx: 'Selected',

maxSelected: -1,

autoSort: false,

autoSortAvailable: false,

search: false,

caseSensitive: false,

delay: 200,

optGroupSearch: false,

minSize: 6

};

return this.each(function () {

varel = $(this);

var data = el.data('multiselect2side');

if (options)

$.extend(o, options);

if (!data)

el.data('multiselect2side', o);

varoriginalName = $(this).attr("name");

if (originalName.indexOf('[') != -1)

originalName = originalName.substring(0, originalName.indexOf('['));

varnameDx = originalName + "ms2side__dx";

varnameSx = originalName + "ms2side__sx";

var size = $(this).attr("size");

// SIZE MIN

if (size < o.minSize) {

$(this).attr("size", "" + o.minSize);

size = o.minSize;

}

// UP AND DOWN

var divUpDown =

"

" +

"

" + o.labelSort + "

" +

"

" + o.labelTop + "

" +

"

" + o.labelUp + "

" +

"

" + o.labelDown + "

" +

"

" + o.labelBottom + "

" +

"

";

// INPUT TEXT FOR SEARCH OPTION

varleftSearch = false, rightSearch = false;

// BOTH SEARCH AND OPTGROUP SEARCH

if (o.search != false && o.optGroupSearch != false) {

var ss =

o.optGroupSearch + " " +

o.search + " ";

if (o.selectedPosition == 'right')

leftSearch = ss;

else

rightSearch = ss;

}

else if (o.search != false) {

varss = o.search + " ";

if (o.selectedPosition == 'right')

leftSearch = ss;

else

rightSearch = ss;

}

else if (o.optGroupSearch != false) {

varss = o.optGroupSearch + "";

if (o.selectedPosition == 'right')

leftSearch = ss;

else

rightSearch = ss;

}

// CREATE NEW ELEMENT (AND HIDE IT) AFTER THE HIDDED ORGINAL SELECT

var htmlToAdd =

"

" +

((o.selectedPosition != 'right' && o.moveOptions) ? divUpDown : "") +

"

" +

((o.labelsx || leftSearch != false) ? ("

"

+ (leftSearch != false ? leftSearch : o.labelsx) + "

") : "") +

"" +

"

" +

"

" +

((o.selectedPosition == 'right')

?

("

›

" +

"

»

" +

"

‹

" +

"

«

")

:

("

‹

" +

"

«

" +

"

›

" +

"

»

")

) +

"

" +

"

" +

((o.labeldx || rightSearch != false) ? ("

" + (rightSearch != false ? rightSearch : o.labeldx) +

"

") : "") +

"" +

"

" +

((o.selectedPosition == 'right' && o.moveOptions) ? divUpDown : "") +

"

";

el.after(htmlToAdd).hide();

// ELEMENTS

var allSel = el.next().children(".ms2side__select").children("select");

varleftSel = (o.selectedPosition == 'right') ? allSel.eq(0) : allSel.eq(1);

varrightSel = (o.selectedPosition == 'right') ? allSel.eq(1) : allSel.eq(0);

// HEIGHT DIV

varheightDiv = $(".ms2side__select").eq(0).height();

// SELECT optgroup

var searchSelect = $();

// SEARCH INPUT

var searchInput = $(this).next().find("input:text");

varremoveFilter = searchInput.next().hide();

vartoid = false;

var searchV = false;

// SELECT optgroup - ADD ALL OPTGROUP AS OPTION

if (o.optGroupSearch != false) {

varlastOptGroupSearch = false;

searchSelect = $(this).next().find("select").eq(0);

el.children("optgroup").each(function() {

if (searchSelect.find("[value='" + $(this).attr("label") + "']").size() == 0)

searchSelect.append("" + $(this).attr("label") + "");

});

searchSelect.change(function() {

varsEl = $(this);

if (sEl.val() != lastOptGroupSearch) {

// IF EXIST SET SEARCH TEXT TO VOID

if (searchInput.val() != "") {

clearTimeout(toid);

removeFilter.hide();

searchInput.val("");//.trigger('keyup');

searchV = "";

// fto();

}

setTimeout(function() {

if (sEl.val() == "__null__") {

els = el.find("option:not(:selected)");

}

else

els = el.find("optgroup[label='" + sEl.val() + "']").children("option:not(:selected)");

// REMOVE ORIGINAL ELEMENTS AND ADD OPTION OF OPTGROUP SELECTED

leftSel.find("option").remove();

els.each(function() {

leftSel.append($(this).clone());

});

lastOptGroupSearch = sEl.val();

leftSel.trigger('change');

}, 100);

}

});

}

// SEARCH FUNCTION

varfto = function() {

varels = leftSel.children();

vartoSearch = el.find("option:not(:selected)");

// RESET OptGroupSearch

lastOptGroupSearch = "__null__";

searchSelect.val("__null__");

if (searchV == searchInput.val())

return;

searchInput

.addClass("wait")

.removeAttr("style");

searchV = searchInput.val();

// A LITTLE TIMEOUT TO VIEW WAIT CLASS ON INPUT ON IE

setTimeout(function() {

leftSel.children().remove();

if (searchV == "") {

toSearch.clone().appendTo(leftSel).removeAttr("selected");

removeFilter.hide();

}

else {

toSearch.each(function() {

varmyText = $(this).text();

if (o.caseSensitive)

find = myText.indexOf(searchV);

else

find = myText.toUpperCase().indexOf(searchV.toUpperCase());

if (find != -1)

$(this).clone().appendTo(leftSel).removeAttr("selected");

});

if (leftSel.children().length == 0)

searchInput.css({'border': '1px red solid'});

removeFilter.show();

leftSel.trigger('change');

}

leftSel.trigger('change');

searchInput.removeClass("wait");

}, 5);

};

// REMOVE FILTER ON SEARCH FUNCTION

removeFilter.click(function() {

clearTimeout(toid);

searchInput.val("");

fto();

return false;

});

// ON CHANGE TEXT INPUT

searchInput.keyup(function() {

clearTimeout(toid);

toid = setTimeout(fto, o.delay);

});

// CENTER MOVE OPTIONS AND UPDOWN OPTIONS

$(this).next().find('.ms2side__options, .ms2side__updown').each(function(){

vartop = ((heightDiv/2) - ($(this).height()/2));

if (top > 0)

$(this).css('padding-top', top + 'px' );

})

// MOVE SELECTED OPTION TO RIGHT, NOT SELECTED TO LEFT

$(this).find("option:selected").clone().appendTo(rightSel); // .removeAttr("selected");

$(this).find("option:not(:selected)").clone().appendTo(leftSel);

// SELECT FIRST LEFT ITEM AND DESELECT IN RIGHT (NOT IN IE6)

if (!($.browser.msie && $.browser.version == '6.0')) {

leftSel.find("option").eq(0).attr("selected", true);

rightSel.children().removeAttr("selected");

}

// ON CHANGE SORT SELECTED OPTIONS

varnLastAutosort = 0;

if (o.autoSort)

allSel.change(function() {

varselectDx = rightSel.find("option");

if (selectDx.length != nLastAutosort) {

// SORT SELECTED ELEMENT

selectDx.sort(internalSort);

// FIRST REMOVE FROM ORIGINAL SELECT

el.find("option:selected").remove();

// AFTER ADD ON ORIGINAL AND RIGHT SELECT

selectDx.each(function() {

rightSel.append($(this).clone());

$(this).appendTo(el).attr("selected", true);

//el.append($(this).attr("selected", true));HACK IE6

});

nLastAutosort = selectDx.length;

}

});

// ON CHANGE SORT AVAILABLE OPTIONS (NOT NECESSARY IN ORIGINAL SELECT)

varnLastAutosortAvailable = 0;

if (o.autoSortAvailable)

allSel.change(function() {

varselectSx = leftSel.find("option");

if (selectSx.length != nLastAutosortAvailable) {

// SORT SELECTED ELEMENT

selectSx.sort(internalSort);

// REMOVE ORIGINAL ELEMENTS AND ADD SORTED

leftSel.find("option").remove();

selectSx.each(function() {

leftSel.append($(this).clone());

});

nLastAutosortAvailable = selectSx.length;

}

});

// ON CHANGE REFRESH ALL BUTTON STATUS

allSel.change(function() {

// HACK FOR IE6 (SHOW AND HIDE ORIGINAL SELECT)

if ($.browser.msie && $.browser.version == '6.0')

el.show().hide();

vardiv = $(this).parent().parent();

varselectSx = leftSel.children();

varselectDx = rightSel.children();

varselectedSx = leftSel.find("option:selected");

varselectedDx = rightSel.find("option:selected");

if (selectedSx.size() == 0 ||

(o.maxSelected >= 0 && (selectedSx.size() + selectDx.size()) > o.maxSelected))

div.find(".AddOne").addClass('ms2side__hide');

else

div.find(".AddOne").removeClass('ms2side__hide');

// FIRST HIDE ALL

div.find(".RemoveOne, .MoveUp, .MoveDown, .MoveTop, .MoveBottom, .SelSort").addClass('ms2side__hide');

if (selectDx.size() > 1)

div.find(".SelSort").removeClass('ms2side__hide');

if (selectedDx.size() > 0) {

div.find(".RemoveOne").removeClass('ms2side__hide');

// ALL SELECTED - NO MOVE

if (selectedDx.size() < selectDx.size()) {// FOR NOW (JOE) && selectedDx.size() == 1

if (selectedDx.val() != selectDx.val())// FIRST OPTION, NO UP AND TOP BUTTON

div.find(".MoveUp, .MoveTop").removeClass('ms2side__hide');

if (selectedDx.last().val() != selectDx.last().val())// LAST OPTION, NO DOWN AND BOTTOM BUTTON

div.find(".MoveDown, .MoveBottom").removeClass('ms2side__hide');

}

}

if (selectSx.size() == 0 ||

(o.maxSelected >= 0 && selectSx.size() >= o.maxSelected))

div.find(".AddAll").addClass('ms2side__hide');

else

div.find(".AddAll").removeClass('ms2side__hide');

if (selectDx.size() == 0)

div.find(".RemoveAll").addClass('ms2side__hide');

else

div.find(".RemoveAll").removeClass('ms2side__hide');

});

// DOUBLE CLICK ON LEFT SELECT OPTION

leftSel.dblclick(function () {

$(this).find("option:selected").each(function(i, selected){

if (o.maxSelected < 0 || rightSel.children().size() < o.maxSelected) {

$(this).remove().appendTo(rightSel);

el.find("[value='" + $(selected).val() + "']").remove().appendTo(el).attr("selected", true);

}

});

$(this).trigger('change');

});

// DOUBLE CLICK ON RIGHT SELECT OPTION

rightSel.dblclick(function () {

$(this).find("option:selected").each(function(i, selected){

$(this).remove().appendTo(leftSel);

el.find("[value='" + $(selected).val() + "']").removeAttr("selected").remove().appendTo(el);

});

$(this).trigger('change');

// TRIGGER CHANGE AND VALUE NULL FORM OPTGROUP SEARCH (IF EXIST)

searchSelect.val("__null__").trigger("change");

// TRIGGER CLICK ON REMOVE FILTER (IF EXIST)

removeFilter.click();

});

// CLICK ON OPTION

$(this).next().find('.ms2side__options').children().click(function () {

if (!$(this).hasClass("ms2side__hide")) {

if ($(this).hasClass("AddOne")) {

leftSel.find("option:selected").each(function(i, selected){

$(this).remove().appendTo(rightSel);

el.find("[value='" + $(selected).val() + "']").remove().appendTo(el).attr("selected", true);

});

}

else if ($(this).hasClass("AddAll")) {// ALL SELECTED

// TEST IF HAVE A FILTER OR A SELECT OPTGROUP

if (removeFilter.is(":visible") || (searchSelect.length > 0 && searchSelect.val() != "__null__"))

leftSel.children().each(function(i, selected){

$(this).remove().appendTo(rightSel);

el.find("[value='" + $(selected).val() + "']").remove().appendTo(el).attr("selected", true);

});

else {

leftSel.children().remove().appendTo(rightSel);

el.find('option').attr("selected", true);

// el.children().attr("selected", true); -- PROBLEM WITH OPTGROUP

}

}

else if ($(this).hasClass("RemoveOne")) {

rightSel.find("option:selected").each(function(i, selected){

$(this).remove().appendTo(leftSel);

el.find("[value='" + $(selected).val() + "']").remove().appendTo(el).removeAttr("selected");

});

// TRIGGER CLICK ON REMOVE FILTER (IF EXIST)

removeFilter.click();

// TRIGGER CHANGE AND VALUE NULL FORM OPTGROUP SEARCH (IF EXIST)

searchSelect.val("__null__").trigger("change");

}

else if ($(this).hasClass("RemoveAll")) {// ALL REMOVED

rightSel.children().appendTo(leftSel);

rightSel.children().remove();

el.find('option').removeAttr("selected");

//el.children().removeAttr("selected"); -- PROBLEM WITH OPTGROUP

// TRIGGER CLICK ON REMOVE FILTER (IF EXIST)

removeFilter.click();

// TRIGGER CHANGE AND VALUE NULL FORM OPTGROUP SEARCH (IF EXIST)

searchSelect.val("__null__").trigger("change");

}

}

leftSel.trigger('change');

});

// CLICK ON UP - DOWN

$(this).next().find('.ms2side__updown').children().click(function () {

varselectedDx = rightSel.find("option:selected");

varselectDx = rightSel.find("option");

if (!$(this).hasClass("ms2side__hide")) {

if ($(this).hasClass("SelSort")) {

// SORT SELECTED ELEMENT

selectDx.sort(internalSort);

// FIRST REMOVE FROM ORIGINAL SELECT

el.find("option:selected").remove();

// AFTER ADD ON ORIGINAL AND RIGHT SELECT

selectDx.each(function() {

rightSel.append($(this).clone().attr("selected", true));

el.append($(this).attr("selected", true));

});

}

else if ($(this).hasClass("MoveUp")) {

varprev = selectedDx.first().prev();

varhPrev = el.find("[value='" + prev.val() + "']");

selectedDx.each(function() {

$(this).insertBefore(prev);

el.find("[value='" + $(this).val() + "']").insertBefore(hPrev);// HIDDEN SELECT

});

}

else if ($(this).hasClass("MoveDown")) {

varnext = selectedDx.last().next();

varhNext = el.find("[value='" + next.val() + "']");

selectedDx.each(function() {

$(this).insertAfter(next);

el.find("[value='" + $(this).val() + "']").insertAfter(hNext);// HIDDEN SELECT

});

}

else if ($(this).hasClass("MoveTop")) {

varfirst = selectDx.first();

varhFirst = el.find("[value='" + first.val() + "']");

selectedDx.each(function() {

$(this).insertBefore(first);

el.find("[value='" + $(this).val() + "']").insertBefore(hFirst);// HIDDEN SELECT

});

}

else if ($(this).hasClass("MoveBottom")) {

varlast = selectDx.last();

varhLast = el.find("[value='" + last.val() + "']");

selectedDx.each(function() {

last = $(this).insertAfter(last);// WITH last = SAME POSITION OF SELECTED OPTION AFTER MOVE

hLast = el.find("[value='" + $(this).val() + "']").insertAfter(hLast);// HIDDEN SELECT

});

}

}

leftSel.trigger('change');

});

// HOVER ON OPTION

$(this).next().find('.ms2side__options, .ms2side__updown').children().hover(

function () {

$(this).addClass('ms2side_hover');

},

function () {

$(this).removeClass('ms2side_hover');

}

);

// UPDATE BUTTON ON START

leftSel.trigger('change');

// SHOW WHEN ALL READY

$(this).next().show();

});

},

destroy : function( ) {

return this.each(function () {

varel = $(this);

var data = el.data('multiselect2side');

if (!data)

return;

el.show().next().remove();

});

},

addOption : function(options) {

var oAddOption = {

name: false,

value: false,

selected: false

};

return this.each(function () {

varel = $(this);

var data = el.data('multiselect2side');

if (!data)

return;

if (options)

$.extend(oAddOption, options);

varstrEl = ""

+ oAddOption.name + "";

el.append(strEl);

// ELEMENTS

var allSel = el.next().children(".ms2side__select").children("select");

varleftSel = (data.selectedPosition == 'right') ? allSel.eq(0) : allSel.eq(1);

varrightSel = (data.selectedPosition == 'right') ? allSel.eq(1) : allSel.eq(0);

if (oAddOption.selected)

rightSel.append(strEl).trigger('change');

else

leftSel.append(strEl).trigger('change');

});

}

};

$.fn.multiselect2side = function( method ) {

if ( methods[method] ) {

return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));

} else if ( typeof method === 'object' || ! method ) {

return methods.init.apply( this, arguments );

} else {

$.error( 'Method ' + method + ' does not exist on jQuery.multiselect2side' );

}

};

})(jQuery);

示例：http://www.senamion.com/blog/jmultiselect2side.html