JQuery UI Multiselect how to get selected options values

Question

wasted my day while searching how to get selected options values in JQuery UI widget by Michael Aufreiter. Here's the link to his demo site and github: http://quasipartikel.at/multiselect/

As a result I just need value fields of selected options without POST/GET sendings to PHP script. I tried many methods and resultless. Need your help and ideas

*Found many topics about jquery ui multiselect but useless because of Aufreiter :s *

Answer 1

I went to the site you've got listed above, and was able to run this in my chrome console:

$('.ui-multiselect .selected li').each(function(idx,el){ console.log(el.title); });

It seems like the values you want are stored in the title attributes of the list items within the div.selected element.

Edit:

Doh! Well of course you want the values. Sorry mate. Completely missed that. The real goods are stored in the jQuery data() objects. In this case, the key you want is 'optionLink'. It maintains a reference to an option element. Each list item in the '.selected' div used the jQuery.data() method to add the underlying option to it.

So, you need to get the selected list items, iterate through, grab the 'optionLink' from the data jQuery data store, and then get the value.

The following code works on the example page:

$('.ui-multiselect .selected li').each(function(idx,el){
    console.log(el);
    var link = $(el).data('optionLink');
    // link now points to a jQuery wrapped <option> tag


    // I do a test on link first.  not sure why, but one of them was undefined.
    // however, I got all four values.  So I'm not sure what the first <li>
    // is.  I'm thinking it's the header...
    if(link){

        // here's your value. add it to an array, or whatever you need to do.
        console.log(link.val());
    }

});

This is the first I've seen of the multiselect. It's slick. But I sympathize with your frustration trying to get something out. A 'getSelectedOptions()' method would be nice.

Cheers

Answer 2

That should work. Tested with Chrome console

$("#countries").val();

Answer 3

Try accessing the selected values on the close event.

e.g.

$("#dropdown").multiselect({
    header: false,
    selectedList : 1,
    height: "auto",
}).multiselectfilter().bind("multiselectclose", function(event, ui) {
    var value = $("#dropdown").val();
});

Hope that helps.

Answer 4

Best solution

$('#select').multiselect({
    selectAllValue: 'multiselect-all',
    enableCaseInsensitiveFiltering: true,
    enableFiltering: true,
    height: "auto",
    close: function() {
            debugger;
            var values = new Array();
            $(this).multiselect("getChecked").each(function(index, item) {

                values.push($(item).val());
            });
            $("input[id*=SelectedValues]").val(values.join(","));
    }
}); 

Answer 5

You can try this:

$('#ListBoxId').multiselect({
    isOpen: true,
    keepOpen: true,
    filter: true
});