2010-12-13 50 views
19

在Windows窗體應用程序,一個下拉選擇列表還爲用戶提供了輸入一個替代值到同場的選項(假設開發者已經離開了這個選項上的控制功能。)在「選擇」/下拉HTML列表中手動輸入值?

如何做一在HTML中完成這項工作?它看起來好像只能從列表中選擇值。

如果不可能用直線HTML做到這一點,有沒有辦法用Javascript做到這一點?

回答

2

ExtJS具有ComboBox控件可以做這件事(和其他有趣的東西!一大堆)

編輯:瀏覽所有的控件等,在這裏:http://www.sencha.com/products/js/

+0

我想,這可能就是我要找的。讓我看看並找回你。謝謝! – Pretzel 2010-12-13 15:16:55

+0

這看起來很完美,但它不適用於我,因爲我在內部爲私人應用程序使用它,它需要我購買許可證(我可能無法說服我的老闆跳槽)。 ://www.sencha.com/license – Pretzel 2010-12-13 15:29:56

+0

這似乎不允許輸入「自定義」值。 – sholsinger 2010-12-13 15:30:18

6

做到這一點,最簡單的方法是使用jQuery:jQuery UI combobox/autocomplete

+0

@Pretzel這不需要許可證,在功能上等同於ExtJS產品。 – sholsinger 2010-12-13 15:31:05

+5

這幾乎可行。在要求用戶選擇語言的示例中。所以我輸入了「C#」,但只要點擊組合框,我的條目就會消失。我需要能夠編寫自定義答案。不只是選擇列表中的人。 – Pretzel 2010-12-13 15:33:36

+0

我認爲這可能是最好的選擇,但我很難弄清楚如何將它連接到我的HTML。 – Pretzel 2010-12-13 16:40:14

2

另一個常見的解決方案是向下拉菜單中添加「Other ..」選項,並在選定的顯示文本框中添加其他內容。然後,在提交表單時,使用下拉列表或文本框值分配隱藏字段值,並在服務器端代碼中檢查隱藏值。

實施例: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; 
} 

而在服務器側,從所述請求讀 「水果」 的值。

0

我喜歡Shadow Wizard的答案,它可以很好地回答這個問題。 我對這個我使用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

我面臨同樣的基本問題:想這是從根本上的HTML規範不同的東西一個文本框的功能和選擇框結合

只是調用它。

的好消息是,selectize.js正是這樣做的:

Selectize是一個文本框,框的混合體。它基於jQuery,對標記,聯繫人列表,國家選擇器等非常有用。

+0

幾乎所有的解決方案,喜歡這個最好的 – Daniel 2015-06-26 17:36:19

19

它現在可以用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> 
+0

它對我很好。在很多情況下,我們不需要支持舊版瀏覽器。我只在輸入欄的背景上添加了「向下箭頭」圖像(您需要一個實際的圖像文件)。 2016-11-01 20:35:22

+1

看起來Chrome本身就是向下箭頭的東西。 – Tod 2017-04-03 12:13:02