¿Cómo puedo pasar los datos de un text box a un select múltiple implementado con javascript?
Supone que yo tengo en un formulario un text box y al lado un select múltiple, como hago para que el datos que yo escriba en el text box se pase al select múltiple y se vaya formando un listado con lo que yo vaya agragando. Claro se me olvida, también tiene un botón que diga agregar el cual invoca la acción.
1 Respuesta
Respuesta de gandalf26
1
Lo puedes hacer con DOM, algo como:
<html>
<head>
<script>
function dale(){
var opt = this.document.createElement("option");
opt.setAttribute("value","VALOR_QUE_SEA");
opt.appendChild(this.document.createTextNode(this.document.getElementById("texto").getAttribute("value")));
this.document.getElementById("select").appendChild(opt);
}
</script>
</head>
<body>
<input type="text" id="texto" value="textillo">
<br>
<select name="select" id="select" onChange="alert(this.options[this.selectedIndex].value)">
<option value=""></option>
</select>
<br>
<input type="button" value="dale" onClick="dale()">
</body>
</html>
<html>
<head>
<script>
function dale(){
var opt = this.document.createElement("option");
opt.setAttribute("value","VALOR_QUE_SEA");
opt.appendChild(this.document.createTextNode(this.document.getElementById("texto").getAttribute("value")));
this.document.getElementById("select").appendChild(opt);
}
</script>
</head>
<body>
<input type="text" id="texto" value="textillo">
<br>
<select name="select" id="select" onChange="alert(this.options[this.selectedIndex].value)">
<option value=""></option>
</select>
<br>
<input type="button" value="dale" onClick="dale()">
</body>
</html>
Ok, ya lo probé y funciona de las mil maravillas, ahora si utilizo un select múltiple me imagino que es casi lo mismo. Ahora supone que yo le meto un texto muy largo en el campo text, cuando lo ingrese al select este se me pone muy grande, ¿hay alguna forma de que este tenga el mismo tamaño a pesar del texto que se le incluya?
Una cosa es lo que se ve en el select, y otra cosa su valor.
Deja el "value" con el texto completo y el resto cortalo a los caracteres que quieras o pon el texto que quieras:
function dale(){
var opt = this.document.createElement("option");
opt.setAttribute("value",this.document.getElementById("texto").getAttribute("value"));
opt.appendChild(this.document.createTextNode("LO QUE_QUIERAS_QUE_SE_LEA"));
this.document.getElementById("select").appendChild(opt);
}
No puedes hacer que un texto de 200 caracteres y otro de 10 ocupen lo mismo...
Deja el "value" con el texto completo y el resto cortalo a los caracteres que quieras o pon el texto que quieras:
function dale(){
var opt = this.document.createElement("option");
opt.setAttribute("value",this.document.getElementById("texto").getAttribute("value"));
opt.appendChild(this.document.createTextNode("LO QUE_QUIERAS_QUE_SE_LEA"));
this.document.getElementById("select").appendChild(opt);
}
No puedes hacer que un texto de 200 caracteres y otro de 10 ocupen lo mismo...
