如何在jQuery MultiSelect中更改选定的文本值

Question

This is my multiselect code..

$("#cboMethod").multiselect({
                header: true,
                height: 150,
                selectedText: '# Method Selected',
                selectedList: 2,
                noneSelectedText: "Select Method",
                minWidth: 210
            });

In my case i have three or more options... Let it be 'OptionA','OptionB','OptionC' etc.. So i need my selectedText to shown as 'OptionA' if i select 'OptionA' alone. And it should be 'OptionA,...' if i selected more values including 'OptionA'

I used selectedList: 2, so if i select only 'OptionA' its working as expected... but if select more options it is getting changed to ' OptionA,OptionB'...

Is that possible to make it as ' OptionA,... '

Answer 1

I have got my solution by doing a small change in multiselect.js

This is the code change:

Original code:

else if (/\d/.test(o.selectedList) && o.selectedList > 0 && numChecked <= o.selectedList) {
                    value = $checked.map(function () { return $(this).next().text(); }).get().join(', ');
                }

Changed Code:

 else if (/\d/.test(o.selectedList) && o.selectedList > 0 && numChecked <= o.selectedList) {
                        var result = $checked.map(function () { return $(this).next().text(); }).get().join(', ');
                        result = result.split(',');
                        if (result.length > 1) {
                            value = result[0] + ',...';
                        }
                        else {
                            value = $checked.map(function () { return $(this).next().text(); }).get().join(', ');
                        }


                    }

This gave me the solution..:)

Answer 2

Try this:

$.map($(this).multiselect("getChecked"), function( input ){
            return input.value;
});

to show the selected text what you can do is you can make a check on the length of the selected like shown below:

checkedValues.length > 0 ? checkedValues.length > 1 ? checkedValues[0] + ',...' : checkedValues[0] : 'Please select an input'

Answer 3

Simply do:

$('#example-reset').multiselect({
    header: true,
    height: 150,
    allSelectedText: 'ALL UNITS SELECTED',
    selectedList: 1,
    numberDisplayed: 1,
    nonSelectedText: "CLICK TO SELECT",
    minWidth: 210
});