Select2 呈现的跨度元素不可复制到剪贴板答案

【问题标题】：Select2 rendered span element not copyable into clipboardSelect2 呈现的跨度元素不可复制到剪贴板
【发布时间】：2019-12-20 21:32:00
【问题描述】：

我一直试图在 select2 小部件中获取所选值的标签（而不是值本身），并使用 clipboardjs 将其复制到剪贴板，但失败了。

要轻松重现此内容，请访问 https://select2.org/getting-started/basic-usage 并在 select2 示例中选择“阿拉斯加”。

通过检查元素，我可以看到该元素在以下位置保存了选定的值“阿拉斯加”：

<span class="select2-selection__rendered" id="select2-zhjr-container" role="textbox" aria-readonly="true" title="Alaska">Alaska</span>

所以我尝试使用从 clipboard.js 源修改的这段代码进行选择，以模拟通过选择来选择文本值：

element = document.querySelector('#select2-zhjr-container')
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
selectedText = selection.toString();
console.log('selectedText: ' + selection)

原来 selectedText 是空的。

如何正确获取 selectedText 值，以便使用 clipboardjs 将其复制到剪贴板？

是的，我也可以使用 DOM 获取标签文本，但是它不能复制到剪贴板中。标签文本必须以编程方式选择，然后复制到剪贴板。

以编程方式选择和获取所选文本是失败的。

谢谢。

【问题讨论】：

jQuery select2 get value of select tag? 的可能重复项 - 您应该能够获得原始下拉列表的值，因为 select2 会更新它
还有stackoverflow.com/questions/50941892/…
对不起@Pete，但这更多的是能够使用clipboardjs将值复制到剪贴板，而不仅仅是获取字符串值本身
第一个副本是如何获取字符串值，第二个副本是如何放入剪贴板
让我试试你的链接@Pete .. 谢谢

标签： javascript jquery-select2 clipboard.js

【解决方案1】：

通过使用 textContent 我能够得到它

element = document.querySelector('#select2-v8mi-container')
console.log('selectedText: ' + element.textContent)

selectedText: Alaska

【讨论】：

对不起，我没有提到我已经用这种方式得到它，但是使用这种方法，我无法通过编程选择将字符串复制到剪贴板。