выпадающий с возможностью добавления нового элемента

Question

Возможно ли иметь выпадающий элемент управления с функциональностью, который, если в раскрывающемся списке нет элемента, я могу просто набрать его в себе?

спасибо за любую помощь

Answer 1

Это не возможно со стандартным контролем HTML select, однако вы можете использовать HTML input текстовое поле, которое использует AJAX автозаполнение для отображения выпадающего меню:

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

---

В качестве альтернативы вы можете выбрать «Другое» в раскрывающемся списке HTML select, который при выборе будет отображать TextBox contr ol

Answer 2

У вас может быть текстовое поле рядом с раскрывающимся списком с кнопкой отправки, которая добавляет html в раздел списка?

Answer 3

Отказ от ответственности: Я знаю, что этот вопрос не был помечен jQuery, но для будущих пользователей я могу начать запуск jquery-решения.

---

Вот простой способ запуска плагина jQuery для управления динамическими параметрами в поле выбора. Дополнительное текстовое поле и кнопка добавляются в DOM для каждого элемента выбора. Также в нижней части списка выбора добавляется опция с текстом, например «добавить элемент ...». Выбранная эта опция позволяет пользователю ввести новый элемент и добавить его в поле выбора.

Живой пример здесь: 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!"});