Dynamically Add/Remove Options From Select JavaScript

This tutorial shows how to get, add and remove options form a select/dropdown using plain JavaScript. We demonstrate this with the following example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamically add/remove options select - JavaScript</title>
</head>
<body>

    <select id="dynamic-select">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </select>

    <button onclick="getOption()">get item</button>
    <button onclick="addOption()">add item</button>
    <button onclick="removeOption()">remove item</button>
    <button onclick="removeAllOptions()">remove all</button>

    <script src="script.js"></script>
</body>
</html>

The script.js is located in the same directory as the html page.

function getOption(){
    var select = document.getElementById("dynamic-select");
    if(select.options.length > 0) {
        var option = select.options[select.selectedIndex];
        alert("Text: " + option.text + "\nValue: " + option.value);
    } else {
        window.alert("Select box is empty");
    }
}

function addOption(){
    var select = document.getElementById("dynamic-select");
    select.options[select.options.length] = new Option('New Element', '0', false, false);
}

function removeOption(){
    var select = document.getElementById("dynamic-select");
    select.options[select.selectedIndex] = null;
}

function removeAllOptions(){
    var select = document.getElementById("dynamic-select");
    select.options.length = 0;
}

Demo



Download

References

You may also like...