Archivo de la etiqueta jQuery

Construir select editables para nuestros formularios

En alguna ocasión, nos hemos visto en la necesidad de tener select editables en nuestros formularios. Esto ocurre cuando queremos elegir una opción de una lista desplegables, pero también poder añadir un elemento nuevo a esta lista. He encontrado varias soluciones, pero la que más me gustó y la más sencilla de implementar es la que os comento. No es necesario añadir librería de javaScript. Únicamente unas lineas de CSS y de HTML.

El código CSS es el siguiente:

.select-editable {position:relative; background-color:white; border:solid grey 1px;  width:120px; height:18px;}
.select-editable select {position:absolute; top:0px; left:0px; font-size:14px; border:none; width:120px; margin:0;}
.select-editable input {position:absolute; top:0px; left:0px; width:100px; padding:1px; font-size:12px; border:none;}
.select-editable select:focus, .select-editable input:focus {outline:none;}

Y el código HTML, donde se define el select (y lo necesario) es el siguiente:

<div class="select-editable">
  <select onchange="this.nextElementSibling.value=this.value">
    <option value=""></option>
    <option value="115x175 mm">115x175 mm</option>
    <option value="120x160 mm">120x160 mm</option>
    <option value="120x287 mm">120x287 mm</option>
  </select>
  <input type="text" name="format" value=""/>
</div>

Esta solución la encontré en StackOverflow, y podeís ver el funcionamiento en https://jsfiddle.net/nwH8A/

La lógica es sencilla. Básicamente lo que hace es, usando CSS, superponer el campo <input> encima del campo <select>, y con onchange=»this.nextElementSibling.value=this.value» hace que el valor del <select> cuando cambia (onchange) se guarde en el campo<input>. Y es el campo <input>, el que debéis de recoger en el POST, por que es donde va la información. En este caso se recogería con $_POST[«format»]

Yo lo único que hice es modificar un poco el CSS, para poder usarlo con Bootstrap. Este sería mi código CSS para que el <select> se vea con la apariencia que se muestra en Bootstrap.

.select-editable {position:relative}
.select-editable select {position:absolute; top:0px; left:0px; font-size:14px; color: #555; width:99%; height: 34px; padding: 4px; margin:0; border: 1px solid #ccc; border-radius: 4px;}
.select-editable input  {position:absolute; top:0px; left:0px; font-size:14px; color: #555; width:90%; height: 31px; padding: 4px; margin:0; border: none;}
.select-editable select:focus, .select-editable input:focus {outline:none;}

Hay más opciones y soluciones, pero muchas de ellas necesitan añadir ficheros js y css a nuestro proyecto, y esta me pareció «la mar de sencilla».