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

Very simple implementation (only basic functionality) based on CSS and one line of JavaScript code.

.dropdown {
  position: relative;
  width: 200px;
}

.dropdown select {
  width: 100%;
}

.dropdown > * {
  box-sizing: border-box;
  height: 1.5em;
}

.dropdown input {
  position: absolute;
  width: calc(100% - 20px);
}

<div class="dropdown">
  <input type="text" />
  <select  onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()">
    <option>This is option 1</option>
    <option>Option 2</option>
  </select>
</div>

Please note: it uses previousElementSibling() which is not supported in older browsers (below IE9)

Answer 2

The <select> tag only allows the use of predefined entries. The typical solution to your problem is to have one entry labeled 'Other' and a disabled edit field (<input type="text"). Add some JavaScript to enable the edit field only when 'Other' is selected.

It may be possible to somehow create a dropdown that allows direct editing, but IMO that is not worth the effort. If it was, Amazon, Google or Microsoft would be doing it ;-) Just get the job done with the least complicated solution. It as faster (your boss may like that) and usually easier to maintain (you may like that).

Answer 3

A little CSS and you are done fiddle

<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv">
<input name="filterTextField" type="text" id="filterTextField" tabindex="2"  style="width: 140px;
    position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" />
        <div style="position: absolute;" id="filterDropdownDiv">
<select name="filterDropDown" id="filterDropDown" tabindex="1000"
    onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute;
    top: 0px; left: 0px; z-index: 1; width: 165px;">
    <option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option>
</select>

Answer 4

ComboBox with TextBox (For Pre-defined Values as well as User-defined Values.)

ComboBox with TextBox (Click Here)

Answer 5

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 = ("<input id='hidden_select_options' type='hidden' value='" + JSON.stringify(optionsSavehouse) + "' />");

    var cSpan = document.getElementById('changingSpan');
    if(cSpan != null) {
        cSpan.innerHTML = (hidden + "<input size='2' type='text' id='tempInput' name='fname' onchange='restoreDropBox()'>");
    }
}

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 = "<select id='changingList'>\n";

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

        if(cInput != null) {
            selectList += ("<option value='-1' selected>" + cInput.value + "</option>\n");
        }

        selectList += ("<option value='-2' onclick='editDropBox()'>- Edit -</option>\n</select>");
        cSpan.innerHTML = selectList;
    }
}

<span id="changingSpan">
    <select id="changingList">
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Cherry</option>
        <option value="4">Dewberry</option>
        <option onclick="editDropBox()" value="-2">- Edit -</option>
    </select>
</span>