下拉選項添加新元素

Question

是否有可能有一個下拉控件的功能，如果沒有元素在下拉我感興趣的我可以只鍵入它在我自己？

感謝您的幫助

Answer 1

這是不可能與標準HTML select控制，但是你可以使用HTML input文本，它使用AJAX自動完成，顯示一個下拉：

http://www.devbridge.com/projects/autocomplete/jquery/

---

或者，您可以在HTML select下拉列表中選擇一個「其他」選項，當選中該選項時，將顯示一個TextBox控件ol

Answer 2

您可以在下拉列表附近使用提交按鈕將文本附加到列表部分的文本框？

Answer 3

免責聲明：我知道這個問題沒有被標記爲jQuery，但對於未來的用戶搜索我會提供一個jQuery解決方案的開始。

---

下面是一個簡單的開始jQuery插件處理允許動態選項到選擇框。爲每個select元素添加一個額外的文本框和按鈕。此外，還會在選擇列表的底部添加一個選項，其中包含「添加項目...」等文本。選擇此選項允許用戶輸入新項目並將其添加到選擇框。

活生生的例子在這裏：http://jsfiddle.net/8G6z3/1/

(function($) { 


    $.fn.freeEntry= function(options){ 

     var settings = $.extend(
      {}, 
      { //defaults 
       addItemText: 'add item...' 
      }, 
      options 
     ); 

     return this.each(function(){ 

      var $this = $(this); 

      var $addItemOption = $('<option>' + settings.addItemText + '</option>'); 
      $this.append($addItemOption); 

      var $addItemControl = $('<input type=text>').hide(); 
      $addItemControl.insertAfter($this); 
      var $addItemButton = $('<input type=button value="add">').hide(); 
      $addItemButton.insertAfter($addItemControl); 
      $addItemButton.click(function(){ 
       if($addItemControl.val().length){ 
        var $newOption = $('<option>' + $addItemControl.val() + '</option>'); 
        $newOption.insertBefore('option:last',$this) 
        $this.val($addItemControl.val()); 
        $addItemControl.val('');     
       } 
       $addItemControl.hide(); 
       $addItemButton.hide(); 
      }); 

      $this.change(function(){ 
       var $this = $(this); 
       if($this.val() == settings.addItemText){ 
        $addItemControl.show().focus(); 
        $addItemButton.show(); 
       } 
      }); 
     }); 
    } 

})(jQuery); 

用法：$('#mySelectBox').freeEntry({ addItemText: "Add a new item yo!"});