Search jQuery

jQuery Forum

How do I modify a widget's options to display additional information?

in Using jQuery • 10 years ago

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';
   }
});