¿Escribir manualmente un valor en una lista HTML “Seleccionar” / desplegable?

En una aplicación de Windows Forms, una lista de selección desplegable también le da al usuario la opción de escribir un valor alternativo en ese mismo campo (suponiendo que el desarrollador haya dejado esta opción habilitada en el control).

¿Cómo se logra esto en HTML? Parece que solo es posible seleccionar valores de la lista.

Si no es posible hacerlo con HTML directo, ¿hay alguna manera de hacerlo con Javascript?

Se puede hacer ahora con HTML5

Consulte esta publicación aquí HTML seleccione formulario con opción para ingresar valor personalizado

       

Me enfrenté al mismo problema básico: tratar de combinar la funcionalidad de un cuadro de texto y un cuadro de selección que son fundamentalmente cosas diferentes en la especificación html.

La buena noticia es que selectize.js hace exactamente esto:

Selectize es el híbrido de un cuadro de texto y un recuadro. Está basado en jQuery y es útil para etiquetar, listas de contactos, selectores de países, etc.

La forma más sencilla de hacerlo es usar jQuery: jQuery UI combobox / autocomplete

ExtJS tiene un control ComboBox que puede hacer esto (¡y una gran cantidad de otras cosas interesantes!)

EDITAR: explore todos los controles, etc., aquí: http://www.sencha.com/products/js/

Otra solución común es agregar la opción “Otro …” al menú desplegable y, cuando se seleccione, mostrar el cuadro de texto que de lo contrario está oculto. Luego, al enviar el formulario, asigne el valor del campo oculto con el valor desplegable o el valor del cuadro de texto y, en el código del lado del servidor, verifique el valor oculto.

Ejemplo: http://jsfiddle.net/c258Q/

Código HTML:

 Please select: 

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; } 

Y en el lado del servidor, lea el valor de “fruta” de la Solicitud.

Telerik también tiene un control de cuadro combinado. Básicamente, se trata de un cuadro de texto con imágenes que al hacer clic sobre ellas revela un panel con una lista de opciones predefinidas.

http://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx

Pero esto es AJAX, por lo que puede tener una huella más grande de lo que desea en su sitio web (ya que dice que es “HTML”).

Me encanta la respuesta de Shadow Wizard, que responde a la pregunta bastante bien. Mi jQuery giro en esto que uso está aquí. http://jsfiddle.net/UJAe4/

Después de escribir el nuevo valor, el formulario está listo para enviar, solo necesita manejar nuevos valores en el back-end.

jQuery es:

 (function ($) { $.fn.otherize = function (option_text, texts_placeholder_text) { oSel = $(this); option_id = oSel.attr('id') + '_other'; textbox_id = option_id + "_tb"; this.append(""); this.after(""); 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)); 

Entonces aplica esto al siguiente html:

 

Solo así:

 $(function () { $("#otherize_me").otherize("other..", "put new option vallue here"); }); 

Cualquiera que busque una solución jQuery fácil sin tener que implementar toda esa locura en el sitio de autocompletar de jQuery UI, consulte aquí:

http://www.benknowscode.com/2013/03/finishing-jquery-ui-autocomplete_4743.html

Este tipo básicamente creó una extensión para la configuración de combobox utilizada en el ejemplo de la interfaz de usuario jQuery. Él también lo expandió un poco.

Solo llámalo con:

 $('.your-select-element').combobox();