I am struggling trying to get from my select2 multiple dropdown the html of selected options.
Here my case.
Now I change selection of users, but in console it is not able to take them using jQuery. The code to identify the selected options from dropdown is:
.select2-results__option[aria-selected=true]
So it should be found using this:
var selected_users = $('.select2-results__options').find('li .select2-results__option[aria-selected=true]').html();
$('.stakeholders_span').html(selected_users);
console.log(selected_users);
Console log gives always "undefined".
Anyone able to help me :)?
Thanks!
Problem is Space in selector after the li
, should be like
'li.select2-results__option[aria-selected=true]').html();
$('.stakeholders_span'
$(document).ready(function() { $('.select2-results').select2({templateResult: formatState}); $('.select2-results').on("select2:open", function (e) { console.log("open dropdown"); var selected_users = $('.select2-results__options').find('li.select2-results__option[aria-selected=true]'); $("#selected").html(selected_users); console.log(selected_users.length+" already selected"); }); function formatState (state) { var img_url = ($(state.element).attr("url")); if (!state.id) { return state.text; } var $state = $( '<span ><img sytle="display: inline-block;" src="'+img_url+'" /> ' + state.text + '</span>' ); return $state; } });
select{ width:100%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script> <select class="select2-results" name="states[]" multiple="multiple"> <option value="AL" url="https://www.gravatar.com/avatar/8c4ca71c8741234b3699198010d097b0?s=48&d=identicon&r=PG&f=1">Alabama</option> <option value="MU" url="https://www.gravatar.com/avatar/0eb2e29921d126734f574604f5f0abe8?s=32&d=identicon&r=PG&f=1">MUK</option> <option value="WY" url="https://www.gravatar.com/avatar/bb70a110c197e7e54decf340daffc072?s=32&d=identicon&r=PG">Wyoming</option> </select> ------------ <div id="selected"></div>
I still have the issue.
This is the starting point:
This is the select2 opened when I add a third user:
And this is what I see: only the latest new added:
While I should see the three users.
I applied this code, but is shows only the latest added user:
var stakeholders = $('.select2-results__options').find('li.select2-results__option[aria-selected=true]').html();
console.log(stakeholders);
$('.stakeholders_span').html(stakeholders);
How to solve the above?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.