在“選擇”/下拉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”）。