Выберите несколько, не получая html выбранных параметров, используя jQuery

Question

Я пытаюсь получить из моего множественного раскрывающегося списка select2 html выбранных параметров.

Вот мой случай.

1. У меня есть этот стандарт select2-кратный:

Теперь я меняю выбор пользователей, но в консоли он не может взять их, используя jQuery. Код для идентификации выбранных опций из выпадающего списка:

.select2-results__option [aria-selected = true]

Таким образом, его можно найти с помощью этого:

var selected_users = $('.select2-results__options').find('li .select2-results__option[aria-selected=true]').html();
  $('.stakeholders_span').html(selected_users);
  console.log(selected_users);

Журнал консоли выдает всегда "undefined".

Любой, кто сможет мне помочь:)?

Спасибо!

Answer 1

Проблема в пробеле в селекторе после li, должна быть равна

'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>

Answer 2

У меня все еще есть проблема.

Это отправная точка:

Это select2, открытый при добавлении третьего пользователя:

И вот что я вижу: только последнее добавленное новое:

Хотя я должен видеть трех пользователей.

Я применил этот код, но это показывает только последний добавленный пользователь:

      var stakeholders = $('.select2-results__options').find('li.select2-results__option[aria-selected=true]').html();
  console.log(stakeholders);
  $('.stakeholders_span').html(stakeholders);

Как решить вышеупомянутое?