Question

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

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

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

Answer 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>

Answer 2

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

好消息是selectize.js正是如此：

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

Answer 3

最简单的方法是使用jQuery：jQuery UI combobox/autocomplete

Answer 4

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

编辑：浏览所有控件等，此处：http://www.sencha.com/products/js/

Answer 5

另一种常见的解决方案是在下拉列表中添加“其他..”选项，并在选中时显示另外隐藏的文本框。然后在提交表单时，使用下拉列表或文本框值分配隐藏字段值，并在服务器端代码中检查隐藏值。

示例：http://jsfiddle.net/c258Q/

HTML code：

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”）。

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

7 个答案: