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

JqueryJquery Select2

Jquery Problem Overview


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

Jquery Solutions


Solution 1 - Jquery

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.

Solution 2 - Jquery

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.

Solution 3 - Jquery

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"]

Solution 4 - Jquery

Simply :

$(".leaderMultiSelctdropdown").val()

Solution 5 - Jquery

Try like this,

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

Solution 6 - Jquery

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

Solution 7 - Jquery

Try this:

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

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

  });

Solution 8 - Jquery

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

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

Solution 9 - Jquery

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKaps HasijaView Question on Stackoverflow
Solution 1 - JqueryManuel SchweigertView Answer on Stackoverflow
Solution 2 - JqueryksgView Answer on Stackoverflow
Solution 3 - JqueryJaskeyLamView Answer on Stackoverflow
Solution 4 - JqueryAmro MustafaView Answer on Stackoverflow
Solution 5 - Jqueryuser4310702View Answer on Stackoverflow
Solution 6 - JqueryDeepak JhaView Answer on Stackoverflow
Solution 7 - JqueryRGLView Answer on Stackoverflow
Solution 8 - JqueryAlberto CerqueiraView Answer on Stackoverflow
Solution 9 - JqueryHammad AliView Answer on Stackoverflow