jQuery multiselect drop down menu

Answer 1

• Download jquery.multiselect

• Include the jquery.multiselect.js and jquery.multiselect.css files

• Populate your select input

• Add the multiselect

  $('#' + Field).multiselect({ checkAllText: "Your text for CheckAll", uncheckAllText: "Your text for UncheckCheckAll", noneSelectedText: "Your text for NoOptionHasBeenSelected", selectedText: "You selected # of #" //The multiselect knows to display the second # as the total });

• You may change the style

  ui-multiselect { //The button background:#fff !important; //background-color wouldn't work here text-align: right !important; } ui-multiselect-header { //The CheckAll/ UncheckAll line) background: lightgray !important; text-align: right !important; } ui-multiselect-menu { //The options text-align: right !important; }

• If you want to repopulate the select, you must refresh it:

  $('#' + Field).multiselect('refresh');

• To get the selected values (comma separated):

  var SelectedOptions = $('#' + Field).multiselect("getChecked").map(function () { return this.value; }).get();

• To clear all selected values:

  $('#' + Field).multiselect("uncheckAll");