I'd like to write a function to modify the
jQuery UI MultiSelect Widget options so that the option selectedList displays the object's ID before the information it is programmed to display.
SelectedList displays which items have been checked, and it's parameter is a boolean/numeric value denoting how many checked items to display.
The widget also has a selectedText
option, which is programmed to receive 3 arguments: the # of checkboxes checked, total # of
checkboxes, and an array of the checkboxes that were
checked. I've included the sample script for this below as I'm assuming that the function I'd need probably requires a similar structure.
Script for assigning the widget's options- $(function(){
- $(".multi").each(function(){
- $(this).multiselect({
- selectedList: 4, //This displays the options which have been selected (max. 4)
- multiple: true,
- header: false,
- noneSelectedText: $(this).attr("id"),
- })
- })
- });
HTML for Multiselect Dropdown - <select class="multi" name="example" id="example" multiple="multiple">
- <option value="1">Option 1</option>
- <option value="2">Option 2</option>
- <option value="3">Option 3</option>
- <option value="4">Option 4</option>
- <option value="5">Option 5</option>
- </select>
The script which defines both
SelectedList and selectedText (in JQuery.multiselect.js):
- // updates the button text. call refresh() to rebuild
- update: function(){
- var o = this.options,
- $inputs = this.inputs,
- $checked = $inputs.filter(':checked'),
- numChecked = $checked.length,
- value;
-
- if( numChecked === 0 ){
- value = o.noneSelectedText;
- } else {
- if($.isFunction( o.selectedText )){
- value = o.selectedText.call(this, numChecked, $inputs.length, $checked.get());
- } else if( /\d/.test(o.selectedList) && o.selectedList > 0 && numChecked <= o.selectedList){
- value = $checked.map(function(){ return $(this).next().html(); }).get().join(', ');
- } else {
- value = o.selectedText.replace('#', numChecked).replace('#', $inputs.length);
- }
- }
-
- this.buttonlabel.html( value );
- return value;
- },
Information that might be helpful
The example given for sending the 3 arguments to selectedText
is:
$("select").multiselect({
selectedText: function(numChecked, numTotal, checkedItems){
return numChecked + ' of ' + numTotal + ' checked';
}
});
I tried (unsuccessfully) a few variations of return $(this).attr("id") + selectedList;