可编辑组合框Javascript和HTML
[英]Editable Combo Box Javascript and HTML
问题描述
I need to do the following thing: Using JavaScript , the HTML input tag having the text type and a select tag (combo box), create an editable combo box. 
我需要做以下事情：使用JavaScript （具有文本类型的HTML输入标签和一个select标签 （组合框）），创建一个可编辑的组合框。
I have no idea how to make a combo box editable. 我不知道如何使组合框可编辑。 Can you give me some suggestions, please? 你能给我一些建议吗？
I create the combo box like this, but is obviously not editable: 我创建了这样的组合框，但显然不可编辑：
<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>
Where should I use the input tag? 我应该在哪里使用输入标签？
2 个解决方案
解决方案1
5 2016-04-19 09:44:13
HTML5 includes the datalist element which solves this problem! 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>
解决方案2
1 2016-04-17 19:41:28
Try something like this: 尝试这样的事情：
<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
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.