如何在select2事件中获取所有选项数据？

Question

Here is my code:

$(document).find('#mySelect').on('select2:select', function(){
    console.log($(this).val());
    console.log($(this).allOptions);
})

I am getting the selected value here. I want to access all the options here. how to do that?

Answer 1

use $(this).children() .

 $(document).find('#mySelect').on('change', function() { console.log($(this).val()); console.log($(this).children()); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="" id="mySelect"> <option value="One">One</option> <option value="Two">Two</option> </select> 

Answer 2

You can try like this:

$(document).find('#example').on('select2:select', function(){
   var data = [],
   adapter = $(this).data().select2.dataAdapter;
    $(this).children().each(function () {
        if (!$(this).is('option') && !$(this).is('optgroup')) {
            return true;
        }
        data.push(adapter.item($(this)));
    });
    console.log(data)
})

HTML look like:

<select id="example" multiple="multiple" style="width: 300px">
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>

You may check it on fiddle also. Here is the link demo