Скопировать выделенный элемент из <select>

Question

Может ли кто-нибудь сообщить мне, как скопировать выделенный / выбранный элемент option из одного тега select в другой select на click кнопки, используя JavaScript (не jQuery)?

Тег select имеет атрибут size, поэтому он не является раскрывающимся.

function copy_all() {
  var roleList = document.getElementById("roles");
  var asgned_roles = document.getElementById("asgndroles");
  asgned_roles.innerHTML = roleList.innerHTML;
}

function copy_selected() {
  var selected = document.getElementsByTagName("OPTION");
  var asgned_roles = document.getElementById("asgndroles");
  if (selected.hasFocus()) {
    asgned_roles.innerHTML = selected.innerHTML;
  }
}

<select size="5" id="roles">
  <option>Admin</option>
  <option>User</option>
  <option>Super User</option>
  <option>Super Admin</option>
</select>
<select size="5" id="asgndroles">
</select>
<button onclick="copy_selected()">COPY</button>
<button onclick="copy_all()">COPY ALL</button>

Answer 1

Чтобы получить index выбранного элемента option, используйте свойство selectedIndex.

Чтобы добавить опцию к цели select, используйте метод appendChild().

Чтобы удалить опцию из источника select, используйте метод removeChild().

var source_select = document.getElementById("roles");
var target_select = document.getElementById("asgndroles");

function copy_selected() {
  var selected_option = source_select.options[source_select.selectedIndex];
  source_select.removeChild(selected_option);
  target_select.appendChild(selected_option);
}

<select size="5" id="roles">
  <option>Admin</option>
  <option>User</option>
  <option>Super User</option>
  <option>Super Admin</option>
</select>
<select size="5" id="asgndroles">
</select>
<button onclick="copy_selected()">COPY</button>