JSFiddle - React, Tailwind, and code Playground

by K.J Ye

HTML

<select id="myselect">
    <option value='none'>--Select a page--</option>
    <option value="1">W3Schools</option>
    <option value="2">Microsoft</option>
    <option value="3">AltaVista</option>
</select>
<br/><br/>
opt text: <input type='text' name='mytext' id='mytext' /><br/>
opt value: <input type='text' name='myvalue' id='myvalue' /><br/><br/>
<button value='add' id='addbtn' name='addbtn'>add</button>
<button value='edit' id='editbtn' name='editbtn'>edit</button>
<button value='delete' id='deletebtn' name='deletebtn'>delete</button>

JavaScript

var myselect = document.getElementById('myselect');


function createOption() {
    var currentText = document.getElementById('mytext').value;
    var currentValue = document.getElementById('myvalue').value;
    var objOption = document.createElement("option");
    objOption.text = currentText;
    objOption.value = currentValue;

    //myselect.add(objOption);
    myselect.options.add(objOption);
}

function editOption() {
    myselect.options[myselect.selectedIndex].value = document.getElementById('mytext').value;
    myselect.options[myselect.selectedIndex].text = document.getElementById('myvalue').value;
}

function deleteOption() {
    myselect.options[myselect.selectedIndex] = null;
    if (myselect.options.length == 0) {
        document.getElementById('mytext').value = '';
        document.getElementById('myvalue').value = '';
    } else {
        document.getElementById('mytext').value = myselect.options[myselect.selectedIndex].text;
        document.getElementById('myvalue').value = myselect.options[myselect.selectedIndex].value;
    }
}

document.getElementById('addbtn').onclick = createOption;
document.getElementById('editbtn').onclick = editOption;
document.getElementById('deletebtn').onclick = deleteOption;

myselect.onchange = function() {
    document.getElementById('mytext').value = myselect.value;
    document.getElementById('myvalue').value = myselect.options[myselect.selectedIndex].text;
}