logo标签列表

如何在HTML中创建可编辑的下拉列表？

htmlcomboboxhtml-select
70
我想创建一个文本框，其中带有下拉列表，让用户选择一些预定义的值。用户还应该能够键入新值或从下拉列表中选择预定义的值。我知道我可以使用两个小部件来实现，但在我的应用程序中，如果能统一在一个小部件中会更加方便。
是否有标准的小部件可用，还是必须使用第三方JavaScript？
浏览器兼容性如何？
12个回答
0
<input type="murillo" name="murillo"/>
    <datalist id="null">
        <option value="password">null</option>
        <option value="email-address">null</option>
      
    </datalist>
2
你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community
-1

Simple HTML + Javascript approach without CSS 

function editDropBox() {
    let cSelect = document.getElementById('changingList');
    let holder  = document.getElementById('selectHolder');
    
    if(cSelect != null) {
        // if not edit option selected -> just exit
        if(cSelect.value != "-99") {
            return false;
        }
        
        let optionsSavehouse = [];
        
        let optionsArray = Array.from(cSelect.options);

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

            if(oVal > 0) {
                let localParams = [];
                localParams.push(option.text);
                localParams.push(option.value);
                //localParams.push(option.selected); // if needed
                optionsSavehouse.push(localParams);
            }
        }
        
        let hidden = ("<input id='hidden_select_options' type='hidden' value='" + JSON.stringify(optionsSavehouse) + "' />");
    
        if(holder != null) {
            // here temporarily 'input' field, which you can change as you wish, add classes, styles, increase size etc.
            holder.innerHTML = (hidden + "<input size='10' type='text' id='tempInput' name='name_temp_input' onchange='restoreDropBox()'>");
            document.getElementById('tempInput').focus();
            return true;
        }
    }
    return false;
}

function restoreDropBox() {
    let holder = document.getElementById('selectHolder');
    let cInput = document.getElementById('tempInput');
    let hOptions = document.getElementById('hidden_select_options');

    if(holder != null) {

        let optionsArray = [];

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

        let selectListString = "<select id='changingList' onchange='editDropBox();'>\n";

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

        if(cInput != null) {
            // do not forget change 'value' for new element for something
            // what will fit your purpose
            let nextElementValue = (arrayLength + 1);
            selectListString += ("<option value='" + nextElementValue + "' selected>" + cInput.value + "</option>\n");
        }

        selectListString += ("<option value='-99'>- Edit -</option>\n</select>");
        holder.innerHTML = selectListString;
    }
}
<div id="selectHolder">
    <select id="changingList" onchange="editDropBox();">
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Cherry</option>
        <option value="4">Dewberry</option>
        <option value="-99">- Edit -</option>
    </select>
</div>

当输入文本值时，下拉列表消失是非常不寻常的，但我不会去批评它。 - Qwertie
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接