JSFiddle - React, Tailwind, and code Playground

by dima_k

HTML

<input id="refdocs_input" type="text"/>

<input value="add" type="button" onclick="add_refdoc()"/>

<br>
<select onkeydown="del_refdoc(event)" style="width: 250px;" id="list1"></select>

<br><br>

<select onkeydown="del_refdoc(event)" style="width: 250px;" id="list2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

JavaScript

function add_refdoc() {

    var x = document.getElementById("list1");

    var option = document.createElement("option");

    var input = document.getElementById('refdocs_input')

    option.text = input.value

    x.add(option,x.option)

    x.selectedIndex = x.options.length - 1;
}


function del_refdoc(e) {
    var evt = e ? e : event;
    var sel = evt.target ? evt.target : evt.srcElement;
    if(evt.keyCode && evt.keyCode == 46 || evt.which == 46) {
        var val = sel.value;
        var opts = sel.getElementsByTagName("option");
        if(val != "") {
            for(var i=0; i<opts.length; i++) {
                if(val == opts[i].value)
                    sel.removeChild(opts[i]);
                }
        }
    }
}