Como hacer que aparezcan elementos seleccionados de un desplegable?

dandreta · #1 (**permalink**) 24/04/2007, 06:43

Hola!

Soy nuevo por el foro y necesito algo de ayuda. He estado buscando pero no consigo encontrar nada parecido.

Tengo un desplegable (select) con sus diferentes options y un boton seleccionar.
Necesito que al ir eligiendo las opciones del desplegable y pulsando el botón seleccionar, estas vayan apareciendo debajo en una lista.

Espero haberme explicado bien y que alguien me pueda ayudar.
Gracias de antemano.

yaviz · #2 (**permalink**) 24/04/2007, 07:47

una lista, como? ke aparezcan sin mas en texto? o en un textarea o algo asi?

yaviz · #3 (**permalink**) 24/04/2007, 08:51

te hize esto haber si te sirve

<body>
<form id="form" action="">

<select id="option" name="option" class="combo" onchange="pasar()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>

<textarea name="textarea" rows="10" cols="80">

</textarea>
<script>
function pasar(){
document.forms[0].textarea.value = document.forms[0].textarea.value + document.forms[0].option.value;}
</script>
</form>
</body>

JavierB · #4 (**permalink**) 24/04/2007, 08:52

Hola dandreta. Bienvenido al foro.

Prueba este ejemplo:

Código:

<form>
<select onchange = "txt.value += this.value+'\n'">
<option value="Uno">Uno</option>
<option value="Dos">Dos</option>
<option value="Tres">Tres</option>
</select>
<textarea name="txt"></textarea>
</form>

Saludos,

dandreta · #5 (**permalink**) 25/04/2007, 06:28

Hola de nuevo!

Gracias por las respuestas. Más o menos es lo que quiero conseguir, pero voy a explicarme mejor a ver si me podeis dar una solución.

Mi idea seria esta:

Tengo la select con sus opciones(por ejemplo: coche,casa,perro) y lo que quiero es que al ir seleccionandolas vayan apareciendo debajo en una tabla(si es posible). Es decir, que al seleccionar una opción aparezca una nueva fila en la tabla.Quedaría así:

Si selecciono casa:
1. Casa

Si luego selecciono coche:
1. Casa
2. Coche

y así sucesivamente.(Me interesa que al añadir cada nueva fila a la tabla ésta tenga un número delante, como he puesto, para indicar su orden de selección).

Además, debajo de la tabla habrá un botón Deshacer que al pulsarlo elimine la última fila añadida. Es decir, si teniendo en cuenta el ejemplo que he puesto, se pulsa el botón deshacer, quedaría así:
1. Casa

A ver si me podeis ayudar y gracias de nuevo.
Saludos!

valeguz · #6 (**permalink**) 25/04/2007, 08:02

Hola dandreta
Hace un tiempo tuve que hacer algo con una funcionalidad parecida, lo modifique para que lo que queres, no tiene formato ni colores pero cumple con lo que pedis

Estas son las dos funciones:

Código:

 
function agrega(carga,valor)
/* Realizado por valeguz*/
/*agrega un item en la tabla*/
{
   tabla = document.getElementById(carga).tBodies[0];
   nro=tabla.childNodes.length;
   row = document.createElement("TR");
   cell = document.createElement("TD");
   cell1 = document.createElement("TD");
   textNode2 = document.createTextNode(parseInt(nro,10));
   cell.appendChild(textNode2);
   textNode1 = document.createTextNode(valor.value);
   cell1.appendChild(textNode1);
   row.appendChild(cell);
   row.appendChild(cell1);
   tabla.appendChild(row);
}

function deshacer(carga)
/* Realizado por valeguz*/
/*Borra el ultimo item de la tabla*/

{
  tabla = document.getElementById(carga).tBodies[0];
  nro=tabla.childNodes.length;
  nro--;
  var Cols = tabla.getElementsByTagName("TR");
  if (Cols.length>1)
      Cols[nro].parentNode.removeChild(Cols[nro]);
}

y el select, tabla y boton serian asi:

Código:

<body>

<SELECT id="desplegable" onChange="agrega('carga',this)">
            <OPTION VALUE="casa">casa</OPTION>
            <OPTION VALUE="auto">auto</OPTION>
            </SELECT>
<br>
     <table id="carga">
          <tr>
            <td><b>OPCION SELECCIONADA</b></td>
          </tr>
        </table>
        
<br>
  <input type="button" value="Deshacer" onClick="deshacer('carga')">
</body>

Si lo que queres es un boton que te inserte en lugar del onChange.
Agrega el boton:

Código:

 <input type="button" value="acepta" onClick="agrega('carga',desplegable)">

y borra el evento onChange del select

Espero que te sirva
Saludos

dandreta · #7 (**permalink**) 25/04/2007, 10:55

Muxas gracias valeguz!!

Eso es lo k buscaba. Lo único que he cambiado una línea en la function agrega para que empezara a poner los elementos desde 1 porque sino empezaba desde el 2.

Sólo he tenido que cambiar esto:
textNode2 = document.createTextNode(parseInt(nro,10));

por esto otro:

textNode2 = document.createTextNode(parseInt(nro-1,10));

y me ha ido perfectamente.

Lo único que la función deshacer no se por que pero no me hace nada.
He estado revisando el código y no encuentro la solución para que elimine la última fila añadida.

Si alguien encuentra el fallo o me puede decir por que me falla, se lo agradecería.

Saludos!!!

juan ricardo · #8 (**permalink**) 25/04/2007, 23:00

Camaradas he llagado hasta acá con el fin de encontrar a algguien quien me pueda explicar cómo hacer para que cuando haga click sobre una imagen, o un texto, aparezca una imagen en la parte inferior, de la misma forma que aparece el menú emergente, pero en vez de menú, que sea una imagen, es que no he encontrado por donde ni cómo es. Agradecería mucho la colaboración de quien me quiera ayudar.

valeguz · #9 (**permalink**) 26/04/2007, 10:58

Cita:

Iniciado por dandreta

Lo único que he cambiado una línea en la function agrega para que empezara a poner los elementos desde 1 porque sino empezaba desde el 2.

Te fijaste de que no tuviera ninguna tr adicional ademas de la del "titulo"?

Cita:

Iniciado por dandreta

Lo único que la función deshacer no se por que pero no me hace nada.
He estado revisando el código y no encuentro la solución para que elimine la última fila añadida.

pone un alert en la funcion para que te devuelva el valor de Cols.length y fijate que valor da, si es menor o igual a 1 no te va a hacer nada...

Saludos

juan ricardo · #10 (**permalink**) 27/04/2007, 14:51

Camaradas he llagado hasta acá con el fin de encontrar a algguien quien me pueda explicar cómo hacer para que cuando haga click sobre una imagen, o un texto, aparezca una imagen en la parte inferior, de la misma forma que aparece el menú emergente, pero en vez de menú, que sea una imagen, es que no he encontrado por donde ni cómo es. Agradecería mucho la colaboración de quien me quiera ayudar.

dandreta · #11 (**permalink**) 02/05/2007, 07:52

Cita:

Iniciado por valeguz

Te fijaste de que no tuviera ninguna tr adicional ademas de la del "titulo"?

pone un alert en la funcion para que te devuelva el valor de Cols.length y fijate que valor da, si es menor o igual a 1 no te va a hacer nada...

Saludos

Hola valeguz!
Siento no haber podido responder antes pero he estado ocupado.
El alert que me dices como seria? y donde lo tendria que poner?
gracias.

valeguz · #12 (**permalink**) 04/05/2007, 05:46

Hola dandreta
Disculpame que no conteste antes

primero el tema de los tr: es muy posible que vos tengas que poner nro-1 en la función carga porque en el body tengas algo asi:

<table id="carga">
<tr>
<td><b>OPCION SELECCIONADA</b></td>
</tr><tr> </tr>
</table>

ya que la linea

nro=tabla.childNodes.length;
cuenta la longitud de la tabla es decir la cantidad de filas o tr tiene.

en el caso del deshacer
pone la linea alert(Cols.length); antes de la linea if (Cols.length>1) y fijate que te devuelve, sino la otra opcion saca la condicion if y que la funcion te quede

function deshacer(carga)
/* Realizado por valeguz*/
/*Borra el ultimo item de la tabla*/

{
tabla = document.getElementById(carga).tBodies[0];
nro=tabla.childNodes.length;
nro--;
var Cols = tabla.getElementsByTagName("TR");
Cols[nro].parentNode.removeChild(Cols[nro]);
}

eso si, te va a borrar hasta la fila "opcion seleccionada" si le siguen oprimiendo deshacer

Una pregunta tonta: la tabla tiene como nombre de id lo mismo que vos le envias a deshacer? porque si no es asi puede ser que no lo encuentre aunque supuestamente debería dar un error...

Cualquier cosita a tu disposición

Saludos

valeguz · #13 (**permalink**) 04/05/2007, 09:44

Cita:

Iniciado por juan ricardo

cómo hacer para que cuando haga click sobre una imagen, o un texto, aparezca una imagen en la parte inferior, de la misma forma que aparece el menú emergente, pero en vez de menú, que sea una imagen, es que no he encontrado por donde ni cómo es.

Hola juan ricardo
no te entiendo muy bien lo que queres hacer, ¿serian muchas imagenes y que cada vez que se clique encima de una te muestre otra imagen abajo? o algo asi?
Explicame un poquito más a ver si te puedo ayudar o por lo menos intentarlo

Saludos

dandreta · #14 (**permalink**) 07/05/2007, 06:42

Hola valeguz!

He probado todo lo que me has dicho y he revisado el código una y otra vez pero no encuentro solución. Después de intentarlo de una y otra forma he decidido crearme un html aparte con todo lo que tu me has dicho pero tampoco me funciona. Te dejo el .html completo a ver si me puedes ayudar y encuentras el fallo.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  	<title>Titulo</title>

<script language="javascript">
function agrega(carga,valor)
/* Realizado por valeguz*/
/*agrega un item en la tabla*/
{
   tabla = document.getElementById(carga).tBodies[0];
   nro=tabla.childNodes.length;
   row = document.createElement("TR");
   cell = document.createElement("TD");
   cell1 = document.createElement("TD");
   textNode2 = document.createTextNode(parseInt(nro,10));
   cell.appendChild(textNode2);
   textNode1 = document.createTextNode(valor.value);
   cell1.appendChild(textNode1);
   row.appendChild(cell);
   row.appendChild(cell1);
   tabla.appendChild(row);
}
</script>
<script language="javascript">
function deshacer(carga)
/* Realizado por valeguz*/
/*Borra el ultimo item de la tabla*/

{
tabla = document.getElementById(carga).tBodies[0];
nro=tabla.childNodes.length;
nro--;
var Cols = tabla.getElementsByTagName("TR");
if (Cols.length>1)
Cols[nro].parentNode.removeChild(Cols[nro]);
}
</script>	
 </head>

 <body>
<SELECT id="desplegable">
            <OPTION VALUE="casa">casa</OPTION>
            <OPTION VALUE="auto">auto</OPTION>
            </SELECT>
<input type="button" value="acepta" onClick="agrega('carga',desplegable)">
<br>
     <TABLE id="carga">
          <TR>
            <TD><b>OPCION SELECCIONADA</b></TD>
          </TR>
        </TABLE>
        
<br>
  <input type="button" value="Deshacer" onClick="deshacer('carga')">
	

 </body>
</html>

Poniendo la linea alert(Cols.length); me devuelve bien los valores y aunque quite el if no me hace nada.

Gracias y Saludos!!!

valeguz · #15 (**permalink**) 07/05/2007, 07:46

Hola dandreta
la verdad es que no encuentro el fallo, es más, hice un copy del texto que me dejaste en el post y lo pegue directamente en el bloc de notas, lo guarde como .html y me funciono igual

lo voy a tener que estudiar un ratito mas a ver que esta pasando

Saludos

derkenuke · #16 (**permalink**) 07/05/2007, 08:07

Qué lío hay con este post ¿no?

¿Os parece más sencilla la solución con una lista que con una tabla?

Código PHP:

  <select id="sel" onchange="agregarALaLista( this.options[this.options.selectedIndex].text );">
    <option>casa</option>
    <option>coche</option>
    <option>avi&#243;n</option>
    <option>tren</option>
    <option>monorrail</option>
    <option>trolebus</option>
</select> <input type="button" onclick="borrarUltimo()" value="borrar el último" />
<ol id="lista"></ul>


<script>

var laLista=document.getElementById("lista");
// agrega un elemento a la lista, al final. Con el texto txt
function agregarALaLista(txt) {
    var elem=document.createElement("LI");
    elem.appendChild( document.createTextNode( txt ) );
    laLista.appendChild( elem );
}

// elimina el último elemento de la lista
function borrarUltimo() {
    var elementosLI=laLista.getElementsByTagName("LI");
    if( elementosLI.length > 0 )
        laLista.removeChild( elementosLI[elementosLI.length-1] );
    else
        alert("No hay en la lista nada que borrar.");
}


</script>

A mi me parece más limpio, y más controlable mediante CSS. Además así no te tienes que preocupar por el número de elementos seleccionados, y si los quisieras los podrías hallar con:
laLista.getElementsByTagName("LI").length
sin ningún problema.

Las tablas son un lío porque están llenas de nodos de texto vacío si utilizamos tabulaciones y hay que tener en cuenta demasiadas cosas, <tbody>, <thead>, y demás historias a las que no estamos acostumbrados.

Un saludo.

valeguz · #17 (**permalink**) 07/05/2007, 08:27

Cita:

¿Os parece más sencilla la solución con una lista que con una tabla?

Si es muy posible que sea mas sencilla

pero dandreta dijo especificamente una tabla... pero si le resulta mejor esta solucion bienvenida sea

Por las dudas me voy a fijar en que puede estar fallando el codigo porque ahora me dejo con la intriga

derkenuke · #18 (**permalink**) 07/05/2007, 10:15

Cita:

Iniciado por valeguz

dandreta dijo especificamente una tabla

Ok, intentaremos hacerlo con una tabla entonces.

Cuidado con admitir rápidamente que nro=tabla.childNodes.length; guarda la cantidad de <tr>s que tiene la tabla... En firefox las tabulaciones, espacios en blanco etcétera se toman como hijos de tipo nodo de texto. Habría que utilizar tabla.getElementsByTagName("tr").length para saber exactamente cuantos <tr>s tiene la tabla en sí.

El script no parece muy complicado, eso sí, es más recomendable ir desgranando los problemas en mini-problemas, para encontrar y solventar más fácilmente los errores.

Cuando llegue a casa implemento mi propuesta, a ver si me sale.

Un saludo.

valeguz · #19 (**permalink**) 07/05/2007, 10:53

Hola derkenuke
Ahora me explico todo!!!!
yo estaba utilizando el IE

... cuando comentaste de firefox me fije ejecutandolo desde ahi y me da los mismos errores que a dandreta, que comienza en 2 y no ejecuta el deshacer, la verdad no me habia fijado, que pava

Saludos

dandreta · #20 (**permalink**) 07/05/2007, 11:17

Gracias a los 2 por vuestra ayuda!

Creo que lo he solucionado, pero yo utilizo mozilla y espero que no de problemas con internet explorer. He mezclado un poco de código de los 2 y parece que me ha funcionado. Aquí os dejo mi solución:

Código:

function agrega(carga,valor)
/*agrega un item en la tabla*/
{
   tabla = document.getElementById(carga).tBodies[0];
   nro=tabla.childNodes.length;
   row = document.createElement("TR");
   cell = document.createElement("TD");
   cell1 = document.createElement("TD");
   textNode2 = document.createTextNode(parseInt(nro-1,10) + ".");
   cell.appendChild(textNode2);
   textNode1 = document.createTextNode(valor.value);
   cell1.appendChild(textNode1);
   row.appendChild(cell);
   row.appendChild(cell1);
   tabla.appendChild(row);
}
</script>
<script language="javascript">
function deshacer(carga)
/*Borra el ultimo item de la tabla*/

{
tabla = document.getElementById(carga).tBodies[0];
var Cols = tabla.getElementsByTagName("TR");
if (Cols.length>1)
tabla.removeChild(Cols[Cols.length-1]);
else
alert("No hay proyectos seleccionados.");
}

y luego la tabla y botones:

Código HTML:

<body>
<SELECT id="desplegable">
            <OPTION VALUE="casa">casa</OPTION>
            <OPTION VALUE="auto">auto</OPTION>
            </SELECT>
<input type="button" value="acepta" onClick="agrega('carga',desplegable)">
<br>
     <TABLE id="carga">
          <TR>
            <TD colspan="2"><b>OPCION SELECCIONADA</b></TD>
          </TR>
        </TABLE>
        
<br>
  <input type="button" value="Deshacer" onClick="deshacer('carga')">
	

 </body>

Y con esto me ha funcionado todo.
Otra cosiya:
¿Sabeis que instrucción o que tendría que añadir y donde para que las opciones del desplegable que ya han sido seleccionadas no se puedan volver a añadir a la tabla?

Gracias por toda la ayuda que me habeis dado.
Saludos!!!

derkenuke · #21 (**permalink**) 07/05/2007, 13:13

Bueno, ya hice mi propuesta, no leí tu post antes dandreta, de todas maneras ya que la he hecho la voy a postear.

Código PHP:

  <select id="sel" onchange="if(this.value!='-') agregarALaTabla( this.options[this.options.selectedIndex].text );"> 
    <option value="-">Seleccione por favor</option> 
    <option>casa</option> 
    <option>coche</option> 
    <option>avión</option> 
    <option>tren</option> 
    <option>monorrail</option> 
    <option>trolebus</option> 
</select>  
<input type="button" onclick="eliminarUltimo()" value="eliminar el último" /> <br/> 
 
<table id="tabla" border="1" width="200px"> 
    <thead> 
        <tr> 
            <th width="30px">#</th> 
            <th>Item</th> 
        </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 
 
 
<script> 
 
 
var elementos=0; 
function agregarALaTabla(item) { 
    // creamos filas y celdas, y las anidamos entre sí 
    var fila=document.createElement("TR"); 
    var celdaNum=document.createElement("TD"); 
    var celdaItem=document.createElement("TD"); 
    fila.appendChild(celdaNum); 
    fila.appendChild(celdaItem); 
    // sumamos uno a elementos, y lo colocamos después 
    celdaNum.appendChild( document.createTextNode(++elementos) ); 
    // colocamos el item en la celda de al lado 
    celdaItem.appendChild( document.createTextNode(item) ); 
    // adjuntamos al tbody de la tabla 
    document.getElementById("tabla").getElementsByTagName("tbody")[0].appendChild(fila); 
} 
 
function eliminarUltimo() { 
    if(elementos==0) 
        alert("No hay elementos que borrar"); 
    else { 
        var laTablaTbody=document.getElementById("tabla").getElementsByTagName("tbody")[0]; 
        // borramos la fila (elementos-1) porque la primera fila es de información 
        laTablaTbody.removeChild( laTablaTbody.getElementsByTagName("TR")[elementos-1] ); 
        elementos--;        //restamos a elementos uno, porque hay una fila menos 
    } 
} 
 
</script>

Sólo un apunte: intenta no utilizar nombres de variables iguales a los ID's de los elementos en el documento (tabla), verás que en firefox salta una advertencia:

Cita:

Advertencia: Elemento referenciado por ID/NAME en el ámbito global. Use el estándar del W3C document.getElementById() en su lugar.

Cita:

Iniciado por dandreta

¿Sabeis que instrucción o que tendría que añadir y donde para que las opciones del desplegable que ya han sido seleccionadas no se puedan volver a añadir a la tabla?

Podrías "marcar" las opciones del select con un atributo inventado por ti. O también se me ocurre almacenar en un array las <option> agregadas, y mirar a ver si ha sido agregado esa opción, pero me parece un poco más lío esa alternativa.

El problema viene al eliminar de la tabla. Hay que decirle que sí puede agregar esa opción. Yo lo he resuelto relacionando las filas de la tabla y los índices del select mediante un atributo llamado queOpcionDelSelect, así resulta más sencillo:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title></title> 
<meta name="Author" content="derkeNuke"> 
</head> 
 
<body> 
 
 
<select id="sel" onchange="agregar()"> 
    <option value="-">Seleccione por favor</option> 
    <option>casa</option> 
    <option>coche</option> 
    <option>avión</option> 
    <option>tren</option> 
    <option>monorrail</option> 
    <option>trolebus</option> 
</select>  
<input type="button" onclick="eliminarUltimo()" value="eliminar el último" /> <br/> 
 
<table id="tabla" border="1" width="200px"> 
    <thead> 
        <tr> 
            <th width="30px">#</th> 
            <th>Item</th> 
        </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 
 
 
<script> 
 
 
var elementos=0; 
var elSel=document.getElementById("sel"); 
var laTablaTbody=document.getElementById("tabla").getElementsByTagName("tbody")[0]; 
 
//devuelve true si debo agregar el elemento, false si no 
function deboAgregar() { 
    var opcion=elSel.options[elSel.options.selectedIndex]; 
    if ( opcion.value == '-' || opcion.getAttribute("estaAgregado") == "si" || opcion.getAttribute("estaAgregado") == "null" ) 
        return false; 
    else 
        return true; 
} 
 
function agregarALaTabla() { 
    var index=elSel.options.selectedIndex; 
    var opcion=elSel.options[index]; 
    var item=opcion.text; 
    // creamos filas y celdas, y las anidamos entre sí 
    var fila=document.createElement("TR"); 
    var celdaNum=document.createElement("TD"); 
    var celdaItem=document.createElement("TD"); 
    fila.appendChild(celdaNum); 
    fila.appendChild(celdaItem); 
    // sumamos uno a elementos, y lo colocamos después 
    celdaNum.appendChild( document.createTextNode(++elementos) ); 
    // colocamos el item en la celda de al lado 
    celdaItem.appendChild( document.createTextNode(item) ); 
    // adjuntamos al tbody de la tabla 
    laTablaTbody.appendChild(fila); 
    // marcamos la opcion como agregada 
    opcion.setAttribute("estaAgregado","si"); 
    // guardamos a qué index del select se refiere esta línea 
    fila.setAttribute("queOpcionDelSelect",index); 
} 
 
function agregar() { 
    if(deboAgregar())  
        agregarALaTabla();  
    else  
        alert('No agregaré elementos inválidos o duplicados.'); 
} 
 
function eliminarUltimo() { 
    if(elementos==0) 
        alert("No hay elementos que borrar"); 
    else { 
        // borramos la fila (elementos-1) porque la primera fila es de información 
        var fila=laTablaTbody.getElementsByTagName("TR")[elementos-1]; 
        // ¿a qué opción del elemento se refiere esta fila? Lo guardamos antes en un atributo llamado queOpcionDelSelect 
        var index=fila.getAttribute("queOpcionDelSelect"); 
        // le decimos que no está agregado 
        elSel.getElementsByTagName("option")[index].setAttribute("estaAgregado","no"); 
        laTablaTbody.removeChild( fila ); 
        elementos--;        //restamos a elementos uno, porque hay una fila menos 
    } 
} 
 
</script> 
 
</body> 
</html>

Los he probado los dos en IE y en FF, y van bien.

Alguna duda más, comenta.

Un saludo!

dandreta · #22 (**permalink**) 08/05/2007, 04:55

Hola!!

Por fin ya está. He probado la ultima solución que me has dado derdenuke y me ha funcionado perfecto.

Gracias a todos por la ayuda y hasta la próxima.

Saludos!!!