Hi everyone
I would like add one more button ( copy button) like clear button into select2 container for copy selected value. Is there any way to do it ?
The “official” way to do that would be to provide your own implementation of the Select2 SelectionAdapter. However, the Select2 Adapter specification is not well documented. There are a couple of examples on the web if you care to google for them, but they might not serve your needs. If you want to take that approach, my advice would be to start with the default SelectionAdapter that ships with Select2 (you can find the source code in the Select2 GitHub repository), and modify it to suit your needs.
With a single-select Select2, you could also use the “templateSelection” callback to display your custom Copy button along with the current selection, since that callback allows you to output any HTML in the selection container when the user makes a selection.
With a multi-select Select2, this might be harder; I’ve never tried templating a multi-select Select2, and the Select2 documentation doesn’t show an example of doing this. If you couldn’t do it through the “templateSelection” callback you could manually (via JavaScript, of course) insert your Copy button into the HTML DOM element that Select2 creates to display the user’s selections. You would probably want to add some padding to that element and position your Copy button in the padding area so the selection “tags” that Select2 displays in the selection area wouldn’t overlap (or be overlapped by) your Copy button.
The HTML elements that Select2 inserts into the DOM to display the Select2 widget are not officially documented, but it’s easy enough to find them using your browser’ Element Inspector (just right-click on the Select2’s selection area and choose “Inspect Element”).
Good luck!