selectタグで選択中の値(テキスト)をクリップボードにコピーする(clipboard.js)

inputタグとかtextareaタグだと普通にクリップボードにコピーできるけどselectタグだとできない。

GitHub - zenorocha/clipboard.js: Modern copy to clipboard. No Flash. Just 3kb gzipped https://github.com/zenorocha/clipboard.js/

clipboard.jsを使えばできるのでは？と思ってREADME.md眺めてみたけどselectタグのサンプルはない。

世界中でこの問題を抱えてるのは自分だけなの？そんなバカなｗとかぶつくさ言いながらIssueを眺めてたらそれっぽいのを発見。

Copy Text of Selected select element · Issue #290 · zenorocha/clipboard.js · GitHub https://github.com/zenorocha/clipboard.js/issues/290

new Clipboard('.btn', {
  text: function(trigger) {
    return document.querySelector('select').value;
  }
});

これだと値が取れるので

new Clipboard('.btn', {
  text: function(trigger) {
    var selector = document.querySelector('#your_special_select_tag');
    var index = selector.selectedIndex;
    var text = selector.options[index].text;
    return text;
  }
});

このような感じで選択中のテキストをクリップボードにコピーできるようにした。