Select2 多个没有使用 jQuery 获取 html 选择的选项答案

【问题标题】：Select2 multiple not getting html selected options using jQuerySelect2 多个没有使用 jQuery 获取 html 选择的选项
【发布时间】：2020-02-05 07:40:02
【问题描述】：

我正在努力尝试从我的 select2 多个下拉列表中获取所选选项的 html。

这是我的情况。

我有这个标准的 select2-multiple：

现在我更改了用户的选择，但在控制台中它无法使用 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);

控制台日志总是给出“未定义”。

任何人都可以帮助我:)？

谢谢！

【问题讨论】：

标签： javascript jquery jquery-select2 dropdown

【解决方案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>

【讨论】：

谢谢！我会测试并告诉你:)
不幸的是，它对我不起作用。我需要 $('.select2-results__options').find('li.select2-results__option[aria-selected=true]') 的 html()，但您的解决方案似乎得到了它。还有其他想法吗？
我不明白。发生了什么，你需要什么
好的，我需要执行以下操作：选择多个选项（它们也有图像，所以我需要获取 html()，而不是 text()）。然后点击一个按钮，我需要在一个 div 中看到这个选择的 html。非常感谢！
顺便说一句：我将 select2 用于 bootstrap4

【解决方案2】：

我仍然有这个问题。

这是起点：

这是我添加第三个用户时打开的select2：

这就是我所看到的：只有最新添加的：

虽然我应该看到三个用户。

我应用了此代码，但仅显示最新添加的用户：

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

如何解决以上问题？

【讨论】：