Qué es esto?? Cómo se hace?

[Carxl]

Hey hola a todos!!!, còmo van???

Pues bien, solo quería saber si alguno de ustedes sabe como hacer esto:


Osea:

1. esos dos cuadros que son?? Selects graaaandes???
2. Cómo es su funcionamiento?? Lograr que lo que escoja se ubique en el otro cuadro???

Gracias de antemano por la aclaraciòn...

Saludos

[JavierB]

Hola Carxl

1 - Es una lista, un select al que se le ha dado un tamaño determinado. Por ejemplo, para que muestre 6 items:

<select size="6">

2 - Para pasar elementos de una lista a otra, echa un vistazo a esta página: mover items

Saludos,

[Carxl]

Hola JavierB!!! Muchas gracias por tu ayuda!!!

Si me supuse que eran select

Miraré con detenimiento el código que me pasaste, por encima veo que no puedo quitar una opción ya puesta no?? Eso no se puede hacer?

Saludos y de nuevo gracias

[JavierB]

Hola de nuevo.

¿Quitar una opción ya puesta? No entiendo a qué te refieres

Saludos,

[Carxl]

Hola JavierB

Osea si en el segundo select me ponen tal opcion, y despuès quiero quitar esa opciòn?? Me entiendes??

Si quisiera quitar la opciòn de la imagen "Playa del Carmen, México"?? Se puede??

Gracias por tu colaboración!!!!

[Apolo]

Tema movido desde el foro Web general hacia el foro JavaScript.

Saludos,

[Shiryu_Libra]

mas sencillo, parametriza la funcion para que sea de ida y vuelta

con tu permiso JavierB

en el script

<script type="text/javascript">
<!--
function pasar(de,para) {
obj=document.getElementById(de);
if (obj.selectedIndex==-1) return;
for (i=0; opt=obj.options[i]; i++)
if (opt.selected) {
valor=opt.value; // almacenar value
txt=obj.options[i].text; // almacenar el texto
obj.options[i]=null; // borrar el item si está seleccionado
obj2=document.getElementById(para);
if (obj2.options[0].value=='-') // si solo está la opción inicial borrarla
obj2.options[0]=null;
opc = new Option(txt,valor);
eval(obj2.options[obj2.options.length]=opc);
}
}
-->
</script>

y en los selects

<label for="sel1">Origen:</label>
<select id="sel1" size="5" multiple="multiple">
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
<option value="4">Cuatro</option>
<option value="5">Cinco</option>
</select>
<input type="button" onclick="pasar('sel1','sel2')" value="Agregar"/>
<input type="button" onclick="pasar('sel2','sel1')" value="Quitar"/>
<label for="sel2">Destino:</label>
<select id="sel2" size="5">
<option value='-'>-</option>
</select></p>

[JavierB]

Iniciado por Shiryu_Libra

con tu permiso JavierB

Claro que tienes permiso, todo lo que sea mejorar siempre es bienvenido. Buena modificiación

Saludos,

[Carxl]

Hey Shiryu_Libra y JavierB muchas gracias!!!

Intentaré implementar el código y cualquier cosa les comento

Saludos

[Carxl]

Hola de nuevo!

Estuve mirando la modificaciòn de Shiryu_Libra y pues no sé como solventar unos errores que me presenta:

1- Si agrego y quito un item la primera vez... . Pero si intento agregar el mismo item... ya no aparece en el otro select y además lo elimina del primero

2. Si agrego todos los items en el otro select e intento devolverlos al primero.... se pierden!!! Osea los elimina en el select que está pero no los devuelve al primero

Espero me hayan entendido... y gracias de antemano

Saludos

[Shiryu_Libra]

Carxl
realize nuevamente la prueba y lo realiza bien solo que lo agrega al final de los selects, necesitariamos hacerle modificaciones para poder ordenarlo



anexo: al parecer una ves que eliminas todas las opciones de cualquiera de los dos selects y queda en vacio, el script no puede realizar el anexo de ninguna opcion.....

editando el script

[Shiryu_Libra]

aki de nuevo

script:

<script type="text/javascript">
<!--
function pasar(de,para) {
var obj=document.getElementById(de);
var obj2=document.getElementById(para);

if (obj.selectedIndex==-1) return;
for (i=0; opt=obj.options[i]; i++)
if (opt.selected) {
valor=opt.value; // almacenar value
txt=obj.options[i].text; // almacenar el texto
obj.options[i]=null; // borrar el item si está seleccionado
if (obj.options.length==0)
{
opc1 = new Option("-","-");
eval(obj.options[obj.options.length]=opc1);}

if (obj2.options[0].value=='-'){ // si solo está la opción inicial borrarla
obj2.options[0]=null;}

opc = new Option(txt,valor);
eval(obj2.options[obj2.options.length]=opc);
obj=null;obj2=null;valor=null;txt=null;
}
}
--></script>

<label for="sel1">Origen:</label>
<select id="sel1" size="10" style="width:100px;">
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
<option value="4">Cuatro</option>
<option value="5">Cinco</option>
</select>
<input type="button" onclick="pasar('sel1','sel2')" value="Agregar"/>
<input type="button" onclick="pasar('sel2','sel1')" value="Quitar"/>
<label for="sel2">Destino:</label>
<select id="sel2" size="10" style="width:100px;">
<option value='-'>-</option>
</select>

Esperemos que ahora si funcione como es debido, Saludos Carxl, JavierB