tabla - menu desplegable vertical html
¿Cómo puedo crear una lista desplegable editable en HTML? (9)
Me gustaría crear un campo de texto con una lista desplegable que permita al usuario elegir algunos valores predefinidos. El usuario también debe ser capaz de escribir un nuevo valor o seleccionar uno predefinido de una lista desplegable. Sé que puedo usar dos widgets para eso, pero en mi aplicación sería más ergonómico si estuviera unificado en un widget.
¿Hay un widget estándar o tengo que usar un javascript de terceros?
¿Qué hay de la portabilidad del navegador?
La etiqueta <select> solo permite el uso de entradas predefinidas. La solución típica a su problema es tener una entrada etiquetada ''Otro'' y un campo de edición deshabilitado ( <input type="text" ). Agregue un poco de JavaScript para habilitar el campo de edición solo cuando esté seleccionado ''Otro''.
Es posible crear de alguna manera un menú desplegable que permita la edición directa, pero IMO no vale la pena el esfuerzo. Si lo fuera, Amazon, Google o Microsoft lo harían ;-) Simplemente haga el trabajo con la solución menos complicada. Es más rápido (a su jefe le gusta) y generalmente es más fácil de mantener (es posible que le guste).
Un cuadro combinado desafortunadamente es algo que quedó fuera de las especificaciones HTML.
La única forma de administrarlo, más bien desafortunadamente, es tirar el suyo o usar uno preconstruido. Este parece bastante simple. Utilizo este para una aplicación de código abierto, aunque lamentablemente tienes que pagar por el uso comercial.
La mejor manera de hacerlo es, probablemente, utilizar una biblioteca de terceros.
Hay una implementación de lo que estás buscando en jQuery UI y en dojo . jQuery es más popular, pero dojo te permite definir widgets de forma declarativa en HTML, que suena más parecido a lo que estás buscando.
El que use dependerá de su estilo, pero ambos se desarrollan para el trabajo de navegador cruzado, y ambos se actualizarán con más frecuencia que copiar y pegar código.
Puede lograr esto utilizando la etiqueta <datalist> en HTML5.
<input type="text" name="product" list="productName"/>
<datalist id="productName">
<option value="Pen">Pen</option>
<option value="Pencil">Pencil</option>
<option value="Paper">Paper</option>
</datalist>
Si hace doble clic en el texto de entrada en el navegador, aparecerá una lista con la opción definida.
Un poco de CSS y has terminado violín
<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv">
<input name="filterTextField" type="text" id="filterTextField" tabindex="2" style="width: 140px;
position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" />
<div style="position: absolute;" id="filterDropdownDiv">
<select name="filterDropDown" id="filterDropDown" tabindex="1000"
onchange="DropDownTextToBox(this,''filterTextField'');" style="position: absolute;
top: 0px; left: 0px; z-index: 1; width: 165px;">
<option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option>
</select>
ComboBox con TextBox (para valores predefinidos y valores definidos por el usuario).
Implementación muy simple (solo funcionalidad básica) basada en CSS y una línea de código JS
<div class="dropdown">
<input type="text" />
<select onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()">
<option>This is option 1</option>
<option>Option 2</option>
</select>
</div>
Tenga en cuenta: utiliza previousElementSibling que no es compatible con navegadores antiguos (debajo de IE9)
.dropdown {
position: relative;
width: 200px;
}
.dropdown select
{
width: 100%;
}
.dropdown > * {
box-sizing: border-box;
height: 1.5em;
}
.dropdown select {
}
.dropdown input {
position: absolute;
width: calc(100% - 20px);
}
Aquí está en JSFiddle
Esto se puede lograr con la ayuda de HTML simple, CSS y JQuery. He creado una página de muestra:
$(document).ready(function(){
$(".editableBox").change(function(){
$(".timeTextBox").val($(".editableBox option:selected").html());
});
});
.editableBox {
width: 75px;
height: 30px;
}
.timeTextBox {
width: 54px;
margin-left: -78px;
height: 25px;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<select class="editableBox">
<option value="1">01:00</option>
<option value="2">02:00</option>
<option value="3">03:00</option>
<option value="4">04:00</option>
<option value="5">05:00</option>
<option value="6">06:00</option>
<option value="7">07:00</option>
<option value="8">08:00</option>
<option value="9">09:00</option>
<option value="10">10:00</option>
<option value="11">11:00</option>
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<option value="15">15:00</option>
<option value="16">16:00</option>
<option value="17">17:00</option>
<option value="18">18:00</option>
<option value="19">19:00</option>
<option value="20">20:00</option>
<option value="21">21:00</option>
<option value="22">22:00</option>
<option value="23">23:00</option>
<option value="24">24:00</option>
</select>
<input class="timeTextBox" name="timebox" maxlength="5"/>
</div>
No estoy seguro de que haya una manera de hacerlo automáticamente sin javascript.
Lo que necesita es algo que se ejecute en el lado del navegador para enviar su formulario de vuelta al servidor cuando el usuario haga una selección, por lo tanto, javascript.
Además, asegúrese de tener un medio alternativo (es decir, un botón de envío) para aquellos que tienen Javascript desactivado.
Un buen ejemplo: Visor de cuadro combinado
Incluso tuve un combo-box más sofisticado ayer, con este dhtmlxCombo , usando ajax para recuperar los valores pertinentes entre una gran cantidad de datos.