Escribir dentro de un campo select

ci2000 · #1 (**permalink**) 13/10/2016, 09:21

Hola.

En una página tengo un campo select cargado con datos que provienen de una base de datos.

Me solicitan que se pueda escribir un nuevo dato en el mismo select para luego agregarlo a la lista.

¿Es posible escribir en un select?

Gracias desde ya por las respuestas.
Saludos

mpozo · #2 (**permalink**) 13/10/2016, 09:57

Crea un nuevo elemento option, le otorga el valor y lo asignas al combo

Código Javascript:

Ver originalvar option = document.createElement('option');
        
        option.value = item;
        
        combo.appendChild(option);

#3 (**permalink**) 13/10/2016, 14:22

No le veo la utilidad jajaja pero bueno.. No creo y no conozco un método para escribir EN el select, pero si escribir en un campo texto, y pasarlo...

Como dijo el camarada de arriba hay que usar appendchild... Te dejo un ejemplito sencillito para entenderlo, aplique la funcion see() para ver si tomaba bien el value del option recien creado...

Código HTML:

Ver original<html>
<head>
    <script type="text/javascript">
    function add(){
    var sel = document.getElementById("sl");
    var add = document.getElementById("adder");
    
    var option = document.createElement("option");
    option.appendChild(document.createTextNode(add.value));
    sel.appendChild(option); 
    option.setAtrribute("value", add.value);
    }
    
    function see(){
    alert(document.getElementById("sl").value);
    }
    </script>
</head>
<body>
 
<select id="sl">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select><br/>
 
<input type="text" id="adder" /><button onclick="add();">Agregar opción</button><br/>
<button onclick="see()">Ver</button>
 
</body>
</html>

Saludos,

mpozo · #4 (**permalink**) 13/10/2016, 16:52

No es estrictamente necesario usar appendchild() o crear un elemento. Se puede usar insertAdjacentHTML, el cual analiza el texto y añade el nodo resultante en la posición que se desee.

Código Javascript:

Ver originalcombo.insertAdjacentHTML('beforeend', '<option value="'+ítem+'">'+ítem+'<\option>');

[URL="https://developer.mozilla.org/es/docs/Web/API/Element/insertAdjacentHTML"]https://developer.mozilla.org/es/docs/Web/API/Element/insertAdjacentHTML[/URL]

ci2000 · #5 (**permalink**) 14/10/2016, 06:39

Gracias por las respuestas.

Voy a probar lo que ustedes me han contestado.

Lo que estoy necesitando hacer es exactamente lo que existe en este foro donde aparece "Ir al Foro". Es decir hace una búsqueda según lo escrito (y en cualquier parte del texto) y además si quiero puedo desplegar la lista.

Saludos

mpozo · #6 (**permalink**) 14/10/2016, 08:10

No, mira lo que pretendes hacer se denomina "autocomple". Esto puedes hacerlo facilmente con el elemento <datalist> de html5. El inconveniente es que no es soportado hasta versión 11 de internet explorer. Para tener mayor soporte, puedes usar este

ci2000 · #7 (**permalink**) 14/10/2016, 13:26

mpozo, entiendo lo que me dices.

Miré el código fuente de la página de este foro y por lo que vi, lo utilizado no es un datalist (me parece que es un select).

Saludos

#8 (**permalink**) 14/10/2016, 14:17

Buenísimo mpozo no conocía ese método, agregado a mi brain!!

ci2000 · #9 (**permalink**) 16/10/2016, 14:40

El datalist funciona en Android?

Pregunto porque en mi portátil con Windows si funciona y en mi celular con Android no funciona. En los dos casos uso Chrome.

mpozo · #10 (**permalink**) 18/10/2016, 07:21

Ya no viene al caso según he leido otro tema posterior tuyo, pero cuando quieras saber el soporte que tiene un método, elemento, etc, visita esta página
http://caniuse.com/#search=datalist