logo标签列表

可编辑的组合框 JavaScript 和 HTML

javascripthtmlcombobox
4
我需要做以下的事情：使用JavaScript，对于具有文本类型的HTML输入标签和一个选择标签（下拉框），创建一个可编辑的组合框。
我不知道如何使组合框可编辑。您能给我一些建议吗？
我像这样创建组合框，但显然无法编辑：
<html>
    <label>Your preferred programming language: </label>
    <select id="combobox">
        <option value="">Select one...</option>
        <option value="ActionScript">ActionScript</option>
        <option value="AppleScript">AppleScript</option>
    </select>
</html>

我应该在哪里使用input标签？

如果没有一个答案合适的话，接受一个答案或者寻求进一步的帮助是一个好的实践 :) - deiga
2个回答
10
HTML5包括 datalist 元素来解决这个问题！:) 

<html>
    <label>Your preferred programming language: </label>
    <input type="text" list="combo-options" id="combobox">
    <datalist id="combo-options">
        <option value="ActionScript">ActionScript</option>
        <option value="AppleScript">AppleScript</option>
    </datalist>
</html>

1
尝试像这样做：

<label>Your preferred programming language: </label>
<input type="text" id="new_value"/>
<select id="combobox">
    <option value="">Select one...</option>
    <option value="ActionScript">ActionScript</option>
    <option value="AppleScript">AppleScript</option>
</select>



$("#new_value").keyup(function (e) {
    if (e.keyCode == 13) { // enter key
        var value = $(e.currentTarget).val();   // store the value from the input tag
        var option = $("<option/>");            // create a new option tag
        option.val(value).text(value);          // set the value attribute as well as the content
        $("#combobox").append(option);          // insert the new object to the dom
    }
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接