在“选择”/下拉 HTML 列表中手动输入值?
Posted
技术标签:
【中文标题】在“选择”/下拉 HTML 列表中手动输入值?【英文标题】:Manually type in a value in a "Select" / Drop-down HTML list? 【发布时间】:2011-05-24 17:39:04 【问题描述】:在 Windows 窗体应用程序中,下拉选择器列表还为用户提供了在同一字段中键入替代值的选项(假设开发人员已在控件上启用此选项。)
如何在 html 中实现这一点?似乎只能从列表中选择值。
如果直接使用 HTML 无法做到这一点,有没有办法使用 javascript 做到这一点?
【问题讨论】:
【参考方案1】:现在可以用 HTML5 完成
在此处查看此帖子HTML select form with option to enter custom value
<input type="text" list="cars" />
<datalist id="cars">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</datalist>
【讨论】:
它对我很有效。在很多情况下,我们不需要支持旧浏览器。我只在输入字段的背景上添加了“向下箭头”图像(您需要一个实际的图像文件)。 Chrome 似乎自己做了向下箭头的事情。 这看起来很不错,但是选项没有 onclick 触发器,您不能将任何隐藏值从选项传递到输入。因此,如果您需要为每个选项调用一个带有 id 的函数,这真的很麻烦。此外,如果您正在寻找自定义行为,例如退格清除整个字段,则会导致不需要的行为。【参考方案2】:我遇到了同样的基本问题:尝试将文本框和选择框的功能结合起来,这在 html 规范中是完全不同的东西。
好消息是selectize.js 正是这样做的:
Selectize 是文本框和框的混合体。它是基于 jQuery 的,可用于标记、联系人列表、国家选择器等。
【讨论】:
玩过几乎所有的解决方案,最喜欢这个解决方案 真正的 MVP,你知道那是谁。谢谢你分享。经过大量谷歌搜索后,我花了一段时间才找到像这样的便携式^W鸭鸭……【参考方案3】:最简单的方法是使用 jQuery:jQuery UI combobox/autocomplete
【讨论】:
@Pretzel 这不需要许可证,在功能上等同于 ExtJS 产品。 这几乎可以工作。在要求用户选择语言的示例中。所以我输入了“C#”,但只要点击组合框,我的输入就会消失。我需要能够编写自定义答案。不仅仅是选择列表中的那些。 我认为这可能是最好的选择,但我很难弄清楚如何将它连接到我的 HTML。【参考方案4】:ExtJS 有一个 ComboBox 控件可以做到这一点(以及一大堆其他很酷的东西!!)
编辑:浏览所有控件等,这里:http://www.sencha.com/products/js/
【讨论】:
我想这可能是我正在寻找的。让我检查一下,然后回复你。谢谢! 这看起来很完美,但它对我来说不可用,因为我在内部将它用于私人应用程序并且它需要我购买许可证(我可能无法说服我的老板使用for.) 许可证在这里:sencha.com/license 这似乎不允许输入“自定义”值。【参考方案5】:另一种常见的解决方案是在下拉列表中添加“其他..”选项,并在选择时显示隐藏的文本框。然后在提交表单时,使用下拉列表或文本框值分配隐藏字段值,并在服务器端代码中检查隐藏值。
示例:http://jsfiddle.net/c258Q/
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:
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;
在服务器端,从Request中读取“fruit”的值。
【讨论】:
【参考方案6】:我喜欢影子向导的答案,它确实很好地回答了这个问题。 我使用的 jQuery 扭曲在这里。 http://jsfiddle.net/UJAe4/
输入新值后,表单准备发送,只需要在后端处理新值。
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));
所以你把它应用到下面的 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>
就像这样:
$(function ()
$("#otherize_me").otherize("other..", "put new option vallue here");
);
【讨论】:
【参考方案7】:Telerik 还有一个组合框控件。本质上,它是一个带有图像的文本框,当您单击它们时会显示一个包含预定义选项列表的面板。
http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx
但这是 AJAX,因此它在您的网站上的占用空间可能比您希望的要大(因为您说它是“HTML”)。
【讨论】:
以上是关于在“选择”/下拉 HTML 列表中手动输入值?的主要内容,如果未能解决你的问题,请参考以下文章
选择 -- 请选择 -- 作为 angular 4.0 html 表单中下拉列表的默认值