Get Selected value from Multi-Value Select Boxes by jquery-select2?

Question

I am using Select2 Jquery to bind my dropdown which is used for multiple selection . I am using select2 jquery.

It's working fine, I can bind my dropdown but I need to get the selected value from my multi-value selector. I am looking for method to get value which is supported by select2 Jquery. it might be having a function get selected value.
my drop down binding code

$(".leaderMultiSelctdropdown").select2( {
    maximumSelectionSize: 4
});

Warton

Answer 1

alert("Selected value is: "+$(".leaderMultiSelctdropdown").select2("val"));

alternatively, if you used a regular selectbox as base, you should be able to use the normal jquery call, too:

alert("Selected value is: "+$(".leaderMultiSelctdropdown").val());

both return an array of the selected keys.

Scurrilous

Thanks a lot @manuFS , can you tell me how to set selected value to multi-value selecter.. i know this is another question but if you can. – Warton

>> ivaynberg.github.com/select2 $(".leaderMultiSelctdropdown").select2("val", ["some","keys"]); – Scurrilous

yours second one is not returning the value ...any how first is working so thats gud for me. – Warton

the second one will set the value to "some" and "keys", not return it. – Scurrilous

see this link #12890052 – Warton

what i used for key and some? – Warton

Answer 2

I know its late but I think you can try like this

$("#multipledpdwn").on("select2:select select2:unselect", function (e) {

    //this returns all the selected item
    var items= $(this).val();       

    //Gets the last selected item
    var lastSelectedItem = e.params.data.id;

})

Hope it may help some one in future.

Pontificals

Answer 3

Returns the selected data in structure of object:

console.log($(".leaderMultiSelctdropdown").select2('data'));

Something like:

   [{id:"1",text:"Text",disabled:false,selected:true},{id:"2",text:"Text2",disabled:false,selected:true}]

Returns the selected val:

console.log($('.leaderMultiSelctdropdown').val());
console.log($('.leaderMultiSelctdropdown').select2("val"));

Something like:

["1", "2"]

Colquitt

Answer 4

Simply :

$(".leaderMultiSelctdropdown").val()

Jeb

Answer 5

Try like this,

jQuery('.leaderMultiSelctdropdown').select2('data');

Redfield

The currently accepted answer did not work for me - it just gave ["1","2"], etc. no matter what I picked. This one gave the correct info for me. – Corkhill

Answer 6

You should try this code.

 $("#multiple_Package_Ids_checkboxes").on('change', function (e) { 
        var totAmt = 0;
        $.each($(this).find(":selected"), function (i, item) { 
            totAmt += $(item).data("price");
            });
        $("#PackTotAmt").text(totAmt);
    }); 

Courses

it is useful solution for multiple selected option. – Adagio

This should be the accepted answer, in my opinion. Actually it's for numbers, but you can easily use for text. – Nickens

This right here is the right answer. Thank you – Bair

Answer 7

Try this:

  $('.select').on('select2:selecting select2:unselecting', function(e) {

      var value = e.params.args.data.id;

  });

Pyelography

You might want to expand a bit on why this answer is different from the other ones. – Settera

Answer 8

Please, ckeck this simple example. You can get values in select2 multi.

var values = $('#id-select2-multi').val();
console.log(values);

Penurious

Answer 9

This will get selected value from multi-value select boxes: $("#id option:selected").val()

Harrold