在“选择”/下拉 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 列表中手动输入值?的主要内容,如果未能解决你的问题,请参考以下文章

Vuejs 根据从下拉列表中选择的值显示其他输入字段

Laravel-从下拉列表中选择值后自动填充输入

允许在 Rhandsontable 列下拉列表中进行多选

选择 -- 请选择 -- 作为 angular 4.0 html 表单中下拉列表的默认值

从下拉列表中选择数据时,从 MYSQL 数据库中设置输入字段值属性

Angular 6 无法从提供的对象中自动选择/绑定下拉列表值