0

I've been trying to get the selected value's label (not the value itself) in select2 widget, and copy it to clipboard using clipboardjs, but failed.

To reproduce this easily, please visit https://select2.org/getting-started/basic-usage and select 'Alaska' in the select2 example.

And from inspecting the element, i can see the element holding the selected value 'Alaska' in:

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

So i tried selection using this code, modified from clipboard.js source, to simulate selecting the text value through selection:

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)

And it turns out the selectedText is empty.

How to get the selectedText value correctly, so that it can be copied to clipboard using clipboardjs ?

Yes i could get the label text too using DOM, but then it's not copiable into clipboard. The label text has to be selected programmatically then copied into clipboard.

The selection and getting that selected text programmatically is what fails.

Thank you.

Bertie
  • 17,277
  • 45
  • 129
  • 182
  • Possible duplicate of [jQuery select2 get value of select tag?](https://stackoverflow.com/questions/19908273/jquery-select2-get-value-of-select-tag) - you should just be able to get the value of your original dropdown as select2 will update it – Pete Aug 14 '19 at 10:46
  • Also https://stackoverflow.com/questions/50941892/copy-to-clipboard-value-of-selected-option – Pete Aug 14 '19 at 10:58
  • Sorry @Pete, but this is more about being able to copy the value to clipboard using clipboardjs, and not just about getting the string value per-se – Bertie Aug 14 '19 at 11:10
  • 1
    The first duplicate is how to get the string value, the second duplicate is how to put it into the clipboard – Pete Aug 14 '19 at 11:11
  • Let me try your links @Pete .. thank you – Bertie Aug 14 '19 at 11:13
  • @Pete, fetching the value from select works, but the value of the select is not what i want, i just want the label value. Sorry for the confusion in the question, i just edited it for clarity. – Bertie Aug 14 '19 at 11:16
  • if you see the original question in the first link - it shows you how to get the label text too – Pete Aug 14 '19 at 12:10
  • @Pete, yes i could get the label text too using DOM, but then it's not copiable into clipboard. The label text has to be selected programmatically then copied into clipboard. The selection and getting that selected text programmatically is what fails. – Bertie Aug 14 '19 at 12:12

1 Answers1

1

by using textContent i was able to get it

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

selectedText: Alaska
enkienki
  • 26
  • 4
  • Sorry i didnt mention that i already get it too using this way, but using such approach, i cannot copy the string to the clipboard through programmatic selection. – Bertie Aug 14 '19 at 11:09