How can I create an editable dropdownlist in HTML?

Question

I\'d like to create a text field with a dropdown list that lets the user choose some predefined values. The user should also be able to type a new value or select a predefin

Answer 1

Simple HTML + Javascript approach without CSS

function editDropBox() {
    var cSelect = document.getElementById('changingList');

    var optionsSavehouse = [];
    if(cSelect != null) {
        var optionsArray = Array.from(cSelect.options);

        var arrayLength = optionsArray.length;
        for (var o = 0; o < arrayLength; o++) {
            var option = optionsArray[o];
            var oVal = option.value;

            if(oVal > 0) {
                var localParams = [];
                localParams.push(option.text);
                localParams.push(option.value);
                //localParams.push(option.selected); // if needed
                optionsSavehouse.push(localParams);
            }
        }
    }

    var hidden = ("");

    var cSpan = document.getElementById('changingSpan');
    if(cSpan != null) {
        cSpan.innerHTML = (hidden + "");
    }
}

function restoreDropBox() {
    var cSpan = document.getElementById('changingSpan');
    var cInput = document.getElementById('tempInput');
    var hOptions = document.getElementById('hidden_select_options');

    if(cSpan != null) {

        var optionsArray = [];

        if(hOptions != null) {
            optionsArray = JSON.parse(hOptions.value);
        }

        var selectList = "\n";

        var arrayLength = optionsArray.length;
        for (var o = 0; o < arrayLength; o++) {
            var option = optionsArray[o];
            selectList += ("" + option[0] + "\n");
        }

        if(cInput != null) {
            selectList += ("" + cInput.value + "\n");
        }

        selectList += ("- Edit -\n");
        cSpan.innerHTML = selectList;
    }
}

    
        Apple
        Banana
        Cherry
        Dewberry
        - Edit -