Выпадающий список в текстовое поле с jQuery?

Question

Я хотел бы иметь выпадающий список с вариантами A, B, C и Custom. Когда выбрано таргетинг, выпадающее меню будет заменено текстовым полем, чтобы пользователь мог указать собственное имя, если он этого захочет.

Итак, первый у нас есть что-то вроде этого

<select id="foo" name="foo"> 
    <option value="a">A</option> 
    <option value="b">B</option> 
    <option value="c">C</option> 
    <option value="custom">Custom</option> 
</select> 

И после того, как выбран пользовательский, весь выпадающий список превращалась бы это:

<input name="foo" type="text" /> 

Answer 1

Вот demo с помощью функции .replaceWith():

$('#foo').change(function() { 
    if ($(this).val() === 'custom') { 
     $(this).replaceWith('<input name="foo" type="text" />'); 
    } 
}); 

Answer 2

$('#foo').click(
function() 
{ 
if($(this).val()==="custom") 
{ 
//either toggle the select and input button 
//or add markup here. and clear the old amrkup 
} 

}); 

Answer 3

Как об этом:

$('select.foo').bind('change', function(event) { 
if ($(this).val() == "Custom") 
{ 
    $(this).hide() 
    $("input.foo").show() 
} 
}); 

можно связать потерянный фокус событие ввода для повторного ниспадающего меню и добавить его в качестве опции, если вы хотите (только дайте Настраиваемой идентификатор, а затем изменить его текст) ...

Answer 4

Вот способ сделать это, не скрывая поле выбора, для лучшего удобства пользователей в соответствии с приведенным выше @Gaby.

Он отображает текстовое поле, когда выбрана опция «Пользовательский» и скрывает ее, когда выбрано что-либо еще.

$('#foo').change(function() 
    { 
     var $this = $(this), 
     id = $this.attr('id'), 
     $txt = $('input:text[name=' + id + ']'); 
     if ($this.val() == 'custom') 
     { 
     if ($txt.length == 0) 
     { 
      $txt = $('<input type="text" name="'+ id +'" />'); 
      $this.after($txt); 
      } 
      $txt.show().focus(); 
     } 
     else 
     { 
      $txt.hide(); 
     } 
});