可编辑组合框Javascript和HTML

Question

我需要做以下事情：使用JavaScript （具有文本类型的HTML输入标签和一个select标签 （组合框）），创建一个可编辑的组合框。

我不知道如何使组合框可编辑。 你能给我一些建议吗？

我创建了这样的组合框，但显然不可编辑：

<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>

我应该在哪里使用输入标签？

Answer 1

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>

Answer 2

尝试这样的事情：

<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
    }
});

可编辑组合框Javascript和HTML

问题描述

2 个解决方案

解决方案1
5 2016-04-19 09:44:13

解决方案2
1 2016-04-17 19:41:28

可编辑组合框Javascript和HTML

问题描述

2 个解决方案

解决方案1 5 2016-04-19 09:44:13

解决方案2 1 2016-04-17 19:41:28

解决方案1
5 2016-04-19 09:44:13

解决方案2
1 2016-04-17 19:41:28