JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="mytextarea">test test test test test test test test</textarea>
<select id="myselect">
    <option val="hello" >hello</option>
</select>
<input id="mybutton" type="button" value="do it" />

JavaScript

$("#mybutton").click( function() {
    var pos = getCaret(document.getElementById('mytextarea'));
    var currentText = $("#mytextarea").val();
    var currentTextStart = currentText.substr(0, pos);
    var currentTextEnd = currentText.substr(pos, currentText.length);
    var newText = currentTextStart + $("#myselect").val() + currentTextEnd;
    $("#mytextarea").val(newText);
});


function getCaret(node) {
  if (node.selectionStart) {
    return node.selectionStart;
  } else if (!document.selection) {
    return 0;
  }

  var c = "\001",
      sel = document.selection.createRange(),
      dul = sel.duplicate(),
      len = 0;

  dul.moveToElementText(node);
  sel.text = c;
  len = dul.text.indexOf(c);
  sel.moveStart('character',-1);
  sel.text = "";
  return len;
}