19'C 흐림
서울 강남구
1. Include jQuery library and the jQuery multiselect plugin's files in the html page.
<script src="jquery.min.js"></script>
<script src="jquery.multiselect.js"></script>
2. Call the plugin on the multiple select element.
$('select[multiple]').multiselect({
/* OPTIONS */
});
3. Available options.
$('select[multiple]').multiselect({
columns: 1, // how many columns should be use to show options
search : false, // include option search box
// search filter options
searchOptions : {
delay : 250, // time (in ms) between keystrokes until search happens
showOptGroups: false, // show option group titles if no options remaining
searchText : true, // search within the text
searchValue : false, // search within the value
onSearch : function( element ){} // fires on keyup before search on options happens
},
// plugin texts
texts: {
placeholder : 'Select options', // text to use in dummy input
search : 'Search', // search input placeholder text
selectedOptions: ' selected', // selected suffix text
selectAll : 'Select all', // select all text
unselectAll : 'Unselect all', // unselect all text
noneSelected : 'None Selected' // None selected text
},
// general options
selectAll : false, // add select all option
selectGroup : false, // select entire optgroup
minHeight : 200, // minimum height of option overlay
maxHeight : null, // maximum height of option overlay
maxWidth : null, // maximum width of option overlay (or selector)
maxPlaceholderWidth: null, // maximum width of placeholder button
maxPlaceholderOpts : 10, // maximum number of placeholder options to show until "# selected" shown instead
showCheckbox : true, // display the checkbox to the user
optionAttributes : [], // attributes to copy to the checkbox from the option element
// Callbacks
onLoad : function( element ){}, // fires at end of list initialization
onOptionClick : function( element, option ){}, // fires when an option is clicked
onControlClose: function( element ){}, // fires when the options list is closed
onSelectAll : function( element ){}, // fires when (un)select all is clicked
// @NOTE: these are for future development
minSelect: false, // minimum number of items that can be selected
maxSelect: false, // maximum number of items that can be selected
});
4. API methods.
// loadOptions( options, overwrite, up<a href="https://www.jqueryscript.net/time-clock/">date</a>Select )
$('select[multiple]').multiselect( 'loadOptions', [{
name : 'Option Name 1',
value : 'option-value-1',
checked: false
},{
name : 'Option Name 2',
value : 'option-value-2',
checked: false
}]);
// updates settings
$('select[multiple]').multiselect( 'settings', { columns: 2 });
// disables the plugin
$('select[multiple]').multiselect( 'unload' );
// reloads the plugin
$('select[multiple]').multiselect( 'reload' );
// resets the plugin
$('select[multiple]').multiselect( 'reset' );
// enables/disables
$('select[multiple]').multiselect( 'disable', true ); $('select[multiple]').multiselect( 'disable', false );