在“选择”/下拉HTML列表中手动输入值？

Question

在Windows窗体应用程序中，下拉选择器列表还为用户提供了在同一字段中键入备用值的选项（假设开发人员已在控件上启用此选项。）

如何在HTML中实现这一目标？ 看起来好像只能从列表中选择值。

如果使用直接HTML无法做到这一点，有没有办法用Javascript做到这一点？

Answer 1

现在可以使用HTML5完成

在此处查看此帖子HTML选择表单，可选择输入自定义值

<input type="text" list="cars" />
<datalist id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</datalist>

Answer 2

我遇到了同样的基本问题：尝试结合文本框和选择框的功能，这些是html规范中根本不同的东西。

好消息是selectize.js就是这样做的：

Selectize是文本框和框的混合体。 它是基于jQuery的，它对标记，联系人列表，国家/地区选择器等很有用。

Answer 3

最简单的方法是使用jQuery： jQuery UI组合框/自动完成

Answer 4

ExtJS有一个ComboBox控件可以做到这一点（以及一大堆其他很酷的东西!!）

编辑：浏览所有控件等，在这里： http ： //www.sencha.com/products/js/

Answer 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”的值。

Answer 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");

});

Answer 7

Telerik还有一个组合框控件。 从本质上讲，它是一个带有图像的文本框，当您单击它们时，会显示一个带有预定义选项列表的面板。

http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx

但这是AJAX，所以它可能比你想要的网站更大（因为你说它是“HTML”）。