Javascript 在“选择”/下拉 HTML 列表中手动输入值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4430262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Manually type in a value in a "Select" / Drop-down HTML list?
提问by Pretzel
In a Windows Forms application, a drop-down selector list also gives the user the option of typing an alternate value into that same field (assuming the developer has left this option enabled on the control.)
在 Windows 窗体应用程序中，下拉选择器列表还为用户提供了在同一字段中键入替代值的选项（假设开发人员已在控件上启用此选项。）
How does one accomplish this in HTML? It appears as if it is only possible to select values from the list.
如何在 HTML 中实现这一目标？似乎只能从列表中选择值。
If it's not possible to do this with straight HTML, is there a way to do this with Javascript?
如果不能用直接的 HTML 做到这一点，有没有办法用 Javascript 做到这一点？
回答by Pottsy
It can be done now with HTML5
现在可以用 HTML5 完成
See this post here HTML select form with option to enter custom value
在此处查看此帖子HTML 选择表单，其中包含输入自定义值的选项
<input type="text" list="cars" />
<datalist id="cars">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</datalist>
回答by amorphic
I faced the same basic problem: trying to combine the functionality of a textbox and a select box which are fundamentally different things in the html spec.
我面临着同样的基本问题：试图将文本框和选择框的功能结合起来，这在 html 规范中是根本不同的。
The good news is that selectize.jsdoes exactly this:
好消息是selectize.js正是这样做的：
Selectize is the hybrid of a textbox and box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on.
Selectize 是文本框和框的混合体。它基于 jQuery，可用于标记、联系人列表、国家/地区选择器等。
回答by stian.net
The easiest way to do this is to use jQuery : jQuery UI combobox/autocomplete
最简单的方法是使用 jQuery：jQuery UI 组合框/自动完成
回答by Moo-Juice
ExtJShas a ComboBox control that can do this (and a whole host of other cool stuff!!)
ExtJS有一个 ComboBox 控件可以做到这一点（还有一大堆其他很酷的东西！！）
EDIT: Browse all controls etc, here: http://www.sencha.com/products/js/
编辑：浏览所有控件等，在这里：http: //www.sencha.com/products/js/
回答by Shadow Wizard is Ear For You
Another common solution is adding "Other.." option to the drop down and when selected show text box that is otherwise hidden. Then when submitting the form, assign hidden field value with either the drop down or textbox value and in the server side code check the hidden value.
另一个常见的解决方案是在下拉菜单中添加“其他..”选项，并在选择时显示隐藏的文本框。然后在提交表单时，使用下拉或文本框值分配隐藏字段值，并在服务器端代码中检查隐藏值。
Example: http://jsfiddle.net/c258Q/
示例：http: //jsfiddle.net/c258Q/
HTML code:
HTML代码：
Please select: <form onsubmit="FormSubmit(this);">
<input type="hidden" name="fruit" />
<select name="fruit_ddl" onchange="DropDownChanged(this);">
<option value="apple">Apple</option>
<option value="orange">Apricot </option>
<option value="melon">Peach</option>
<option value="">Other..</option>
</select> <input type="text" name="fruit_txt" style="display: none;" />
<button type="submit">Submit</button>
</form>
JavaScript:
JavaScript：
function DropDownChanged(oDDL) {
var oTextbox = oDDL.form.elements["fruit_txt"];
if (oTextbox) {
oTextbox.style.display = (oDDL.value == "") ? "" : "none";
if (oDDL.value == "")
oTextbox.focus();
}
}
function FormSubmit(oForm) {
var oHidden = oForm.elements["fruit"];
var oDDL = oForm.elements["fruit_ddl"];
var oTextbox = oForm.elements["fruit_txt"];
if (oHidden && oDDL && oTextbox)
oHidden.value = (oDDL.value == "") ? oTextbox.value : oDDL.value;
}
And in the server side, read the value of "fruit" from the Request.
在服务器端，从请求中读取“fruit”的值。
回答by pawelmech
I love the Shadow Wizard answer, which accually answers the question pretty nicelly. My jQuery twist on this which i use is here. http://jsfiddle.net/UJAe4/
我喜欢 Shadow Wizard 的答案，它准确地回答了这个问题。我使用的 jQuery 转折点在这里。http://jsfiddle.net/UJAe4/
After typing new value, the form is ready to send, just need to handle new values on the back end.
输入新值后，表单就可以发送了，只需要在后端处理新值。
jQuery is:
jQuery 是：
(function ($)
{
$.fn.otherize = function (option_text, texts_placeholder_text) {
oSel = $(this);
option_id = oSel.attr('id') + '_other';
textbox_id = option_id + "_tb";
this.append("<option value='' id='" + option_id + "' class='otherize' >" + option_text + "</option>");
this.after("<input type='text' id='" + textbox_id + "' style='display: none; border-bottom: 1px solid black' placeholder='" + texts_placeholder_text + "'/>");
this.change(
function () {
oTbox = oSel.parent().children('#' + textbox_id);
oSel.children(':selected').hasClass('otherize') ? oTbox.show() : oTbox.hide();
});
$("#" + textbox_id).change(
function () {
$("#" + option_id).val($("#" + textbox_id).val());
});
};
}(jQuery));
So you apply this to the below html:
因此，您将其应用于以下 html：
<form>
<select id="otherize_me">
<option value=1>option 1</option>
<option value=2>option 2</option>
<option value=3>option 3</option>
</select>
</form>
Just like this:
像这样：
$(function () {
$("#otherize_me").otherize("other..", "put new option vallue here");
});
回答by Brad
Telerik also has a combo box control. Essentially, it's a textbox with images that when you click on them reveal a panel with a list of predefined options.
Telerik 也有一个组合框控件。本质上，它是一个带有图像的文本框，当您单击它们时，会显示一个带有预定义选项列表的面板。
http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx
But this is AJAX, so it may have a larger footprint than you want on your website (since you say it's "HTML").
但这是 AJAX，因此它在您的网站上的占用空间可能比您想要的要大（因为您说它是“HTML”）。
