Foros del Web » Programando para Internet » Javascript »

eliminar y restaurar opciones select

Estas en el tema de eliminar y restaurar opciones select en el foro de Javascript en Foros del Web. tengo un número n de selects y las opciones de estos selects pueden estar repetidas. el caso es que no tengo problemas al seleccionar una ...
  #1 (permalink)  
Antiguo 18/10/2010, 16:31
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
eliminar y restaurar opciones select

tengo un número n de selects y las opciones de estos selects pueden estar repetidas. el caso es que no tengo problemas al seleccionar una opción y eliminar esa opción en caso que este repetida en otros selects. el problema lo tengo a la hora de restaurar esas opciones eliminadas, la función Redo(). si lo estreso, o bien no inserta todas las opciones eliminadas o sí las inserta pero no en los selects o posiciones en los que estaban de principio.
a modo de aclaración las opciones eliminadas no se insertan todas de una vez, sino que primero se reinserta la última opción eliminada. si se vuelve a invocar a la función se reinserta la penultima, etc... así hasta que los selects han vuelvo a su estado inicial.
Código Javascript:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <script type="text/javascript">
  6. function getElement(elElemento) {
  7. return document.getElementById(elElemento);
  8. }
  9.  
  10.  
  11. var vuelta = 0;
  12. var ok = '';
  13. var eliminadosVal = [[],[],[],[],[]];  
  14. function delOpcion(val) {
  15. eliminados = 0;
  16. if (val.id == ok && vuelta >= 1) {alert('Antes de elegir otra opción de este select, has de restablecer la última opción'); val.options[0].selected = 'selected'; return;}
  17.  
  18. var combo = val.name;
  19. var f = document.form1;
  20.  
  21. for (var i = 0; val.options[i]; i++) {
  22.  
  23.     if (i == val.selectedIndex) {
  24.  
  25.         for (var n = 0, sel = f[combo].length; n < sel; n++) {
  26.  
  27.             if (val.id != f[combo][n].id) {
  28.  
  29.                 for (var p = 0; f[combo][n].options[p]; p++) {
  30.  
  31.                     if (val.value == f[combo][n].options[p].value) {
  32.  
  33.                         eliminados++;
  34.                         eliminadosVal[0].unshift(val.value);
  35.                         eliminadosVal[1].unshift(p);
  36.                         eliminadosVal[2].unshift(f[combo][n].id);
  37.                         eliminadosVal[3].unshift(val);                     
  38.                         getElement(f[combo][n].id).options[p] = null;
  39.                         getElement('deshacer').disabled = false;
  40.                         vuelta ++;
  41.                 break;
  42.                     }
  43.                 }
  44.  
  45.             }
  46.            
  47.         }
  48. break;
  49.  
  50.     }
  51.  
  52. }
  53. ok = val.id;
  54. eliminadosVal[4].unshift(eliminados); // de cuantos select se ha eliminado este valor
  55. }
  56.  
  57.  
  58.  
  59. function Redo() {
  60. vuelta = 0;
  61. var cuantos = parseInt(eliminadosVal[4][0]); // de cuantos select se ha eliminado este valor
  62. alert(cuantos);
  63. for (var i = 0; i < cuantos; i++) {
  64.  
  65.     var reDoOpciones = new Option(eliminadosVal[0][i], eliminadosVal[0][i]);
  66.        
  67.     if (getElement(eliminadosVal[2][i]).options.length == eliminadosVal[1][i]) { // si es la última opción del select
  68.  
  69.         eval(getElement(eliminadosVal[2][i]).options[eliminadosVal[1][i]] = reDoOpciones);
  70.  
  71.     } else {
  72.  
  73.         opt = getElement(eliminadosVal[2][i]).options.length;
  74.  
  75.         for (var n = getElement(eliminadosVal[2][i]).options.length-1; n >= eliminadosVal[1][i];  n--) {
  76.  
  77.             var reInsertaOpt = new Option(getElement(eliminadosVal[2][i]).options[n].text, getElement(eliminadosVal[2][i]).options[n].value);  
  78.             eval(getElement(eliminadosVal[2][i]).options[opt] = reInsertaOpt);
  79.         opt--;
  80.         }
  81.  
  82.         eval(getElement(eliminadosVal[2][i]).options[eliminadosVal[1][i]] = reDoOpciones);
  83.     }
  84.  
  85.     eliminadosVal[3][i].options[0].selected = 'selected'; // devolvemos el foco
  86.  
  87.        
  88. }
  89.  
  90.     eliminadosVal[0].splice(0,cuantos);
  91.     eliminadosVal[1].splice(0,cuantos);
  92.     eliminadosVal[2].splice(0,cuantos);
  93.     eliminadosVal[3].splice(0,cuantos);
  94.     eliminadosVal[4].splice(0,1);
  95.  
  96.     if(eliminadosVal[0].length == '') {getElement('deshacer').disabled = true;}
  97. }
  98. </script>
  99. </head>
  100. <body>
  101. <form id="form1" name="form1" method="post" action="">
  102. <select id="regalo_1" name="regalo[]" size="10" onchange="delOpcion(this)">
  103. <option value="">Regalo para Ti</option>
  104. <option value="Moto">Moto</option>
  105. <option value="Coche">Coche</option>
  106. <option value="Barco">Barco</option>
  107. <option value="Bicicleta">Bicicleta</option>
  108. </select>
  109.  
  110. <select id="regalo_2" name="regalo[]" size="10" onchange="delOpcion(this)">
  111. <option value="">Regalo para Padres</option>
  112. <option value="Coche">Coche</option>
  113. <option value="Casa">Casa</option>
  114. <option value="Viaje">Viaje</option>
  115. <option value="Moto">Moto</option>
  116. </select>
  117.  
  118. <select id="regalo_3" name="regalo[]" size="10" onchange="delOpcion(this)">
  119. <option value="">Regalo para Hermanos</option>
  120. <option value="Consola">Consola</option>
  121. <option value="Bicicleta">Bicicleta</option>
  122. <option value="Moto">Moto</option>
  123. <option value="Mp4">Mp4</option>
  124. </select>
  125.  
  126. <input type="button" id="deshacer" value="Reestablecer Opciones" onclick="Redo();" disabled="disabled" />
  127. </form>
  128. </body>
  129. </html>
gracias

Última edición por IsaBelM; 18/10/2010 a las 16:37 Razón: hacer mas compresible el titulo
  #2 (permalink)  
Antiguo 18/10/2010, 18:14
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.099
Antigüedad: 15 años, 5 meses
Puntos: 790
Respuesta: eliminar y restaurar opciones select

Probá así:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<
html>
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
script type="text/javascript">
function 
getElement(elElemento) {
return 
document.getElementById(elElemento);
}
 
var 
vuelta 0;
var 
ok '';
var 
eliminadosVal = [[],[],[],[],[]];  
 
function 
delOpcion(val) {
eliminados 0;
if (
val.id == ok && vuelta >= 1) {alert('Antes de elegir otra opción de este select, has de restablecer la última opción'); val.options[0].selected 'selected'; return;} 
 
var 
combo val.name;
var 
document.form1;
 
for (var 
0val.options[i]; i++) {
 
    if (
== val.selectedIndex) {
 
        for (var 
0sel f[combo].lengthseln++) {
 
            if (
val.id != f[combo][n].id) {
 
                for (var 
0f[combo][n].options[p]; p++) {
 
                    if (
val.value == f[combo][n].options[p].value) {
 
                        
eliminados++;
                        
eliminadosVal[0].unshift(val.value);
                        
eliminadosVal[1].unshift(p);
                        
eliminadosVal[2].unshift(f[combo][n].id);
                        
eliminadosVal[3].unshift(val);                      
                        
getElement(f[combo][n].id).options[p] = null;
                        
getElement('deshacer').disabled false;
                        
vuelta ++;
                break;
                    }
                }
 
            }
            
        }
break;
 
    }
 
}
ok val.id;
eliminadosVal[4].unshift(eliminados); // de cuantos select se ha eliminado este valor
}
 
onload=function(){
    
window.resetForm=document.body.innerHTML;
    
getElement('deshacer').onclick=function(){
        
document.body.innerHTML=window.resetForm;
        
vuelta 0;
        
ok '';
        
eliminadosVal = [[],[],[],[],[]]; 
        
getElement('deshacer').disabled=1;
        
    }
        
getElement('deshacer').disabled=1;
}
 

</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<select id="regalo_1" name="regalo[]" size="10" onchange="delOpcion(this)">
<option value="">Regalo para Ti</option>
<option value="Moto">Moto</option>
<option value="Coche">Coche</option>
<option value="Barco">Barco</option>
<option value="Bicicleta">Bicicleta</option>
</select>
 
<select id="regalo_2" name="regalo[]" size="10" onchange="delOpcion(this)">
<option value="">Regalo para Padres</option>
<option value="Coche">Coche</option>
<option value="Casa">Casa</option>
<option value="Viaje">Viaje</option>
<option value="Moto">Moto</option>
</select>
 
<select id="regalo_3" name="regalo[]" size="10" onchange="delOpcion(this)">
<option value="">Regalo para Hermanos</option>
<option value="Consola">Consola</option>
<option value="Bicicleta">Bicicleta</option>
<option value="Moto">Moto</option>
<option value="Mp4">Mp4</option>
</select>
 
<input type="button" id="deshacer" value="Reestablecer Opciones" />
</form>
</body>
</html> 
  #3 (permalink)  
Antiguo 19/10/2010, 05:59
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: eliminar y restaurar opciones select

antes de nada, gracias por ocupar tu tiempo en ayudarme.
como decía en mi primer post, no puedo restablecer el estado original de los selects de una tacada, han de ir restableciendose uno por uno a decisión del usuario, por que el número de selects oscila entre 10 y 27. de la manera que me propones, si en algún momento, el usuario, quiere restablecer la última opción que seleccionó, tendrá que empezar de nuevo y eso es justamente lo que quiero evitar.
si, a ti o a cualquier otro, se os ocurre algo, decirmelo
  #4 (permalink)  
Antiguo 19/10/2010, 14:42
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: eliminar y restaurar opciones select

esta porción de código
Cita:
eliminadosVal[4].unshift(eliminados); // de cuantos select se ha eliminado este valor
que estaba en línea 54 y lo he llevado a la línea 38 y ha habido una mejora sustancial. me he asegurado que nunca se podrá seleccionar dos opciones iguales. ahora quedan un par de problemas; si se dan una serie de condiciones, las opciones seleccionadas pierden el foco, el otro problema es mas difícil de explicar pero me parece mas sencillo de solucionar
  #5 (permalink)  
Antiguo 19/10/2010, 19:54
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 10 años, 6 meses
Puntos: 1485
Respuesta: eliminar y restaurar opciones select

por si aún estas atacando los problema... llega un punto en que el boton reestablecer no se inhabilita y si se continua presionando se agregan elementos que ya se habian agregado. ahora mismo no tengo paciencia para analizar la lógica del código pero a modo de sugerencia que -quizás ya lo tengas así pero no estoy seguro porque he revisado ligeramente el código- pudiera ayudarte a controlarlo mejor.

utiliza un array como un historial de undoes (retrocesos) donde cada elemento es un paso. para manejar el array, utiliza los métodos push y pop. de modo que push agrega un paso al final del array y pop elimina ese ultimo paso. entonces, ¿que debería contener cada item del array? cada item representaría otro array donde a su vez contiene uno o más objetos que contiene información que consideres útil para cada option eliminado. por ejemplo, además de la referencia del elemento eliminado, puedes retener la posicion donde se encontraba y el elemento padre que le contenia. luego, para restaurar un paso, pop devolvería un array el cual lo iteras utilizando la información de cada propiedad del objeto. de esta forma, si el array de historial se vacia no corres el riesgo del error antes mencionado.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #6 (permalink)  
Antiguo 20/10/2010, 15:45
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: eliminar y restaurar opciones select

lamento no haber respondido antes, pero hoy no he tenido nada de tiempo. he hecho lo que me indicas y esto es lo que he conseguido. al mismo tiempo, le he quitado el botón y he listado las opciones. continua dando problemas en ciertas situaciones, pero creo que puedo corregirlas
Código Javascript:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
  5. <script type="text/javascript">
  6. function getElement(elElemento) {
  7. return document.getElementById(elElemento);
  8. }
  9.  
  10.  
  11. var vuelta = 0;
  12. var ok = '';
  13. var eliminadosVal = new Array();  
  14. function delOpcion(val) {
  15. var valores = new Array();
  16. var count = 1;
  17. eliminados = 0;
  18.  
  19. if (val.id == ok && vuelta >= 1) {alert('Antes de elegir otra opción de este select, has de restablecer la última opción'); val.options[0].selected = 'selected'; return;}
  20.  
  21. var combo = val.name;
  22. var f = document.form1;
  23.  
  24. for (var i = 0; val.options[i]; i++) {
  25.  
  26.     if (i == val.selectedIndex) {
  27.  
  28.         for (var n = 0, sel = f[combo].length; n < sel; n++) {
  29.  
  30.             if (val.id != f[combo][n].id) {
  31.  
  32.                 for (var p = 0; f[combo][n].options[p]; p++) {
  33.  
  34.                     if (val.value == f[combo][n].options[p].value) {
  35.  
  36.                         eliminados++;
  37.                         valores.push(new Array(val.value,p,f[combo][n].id,val,eliminados));
  38.                             if (count == 1) {
  39.                                 eliminadosVal.push(new Array(valores));
  40.                             }                      
  41.                         getElement(f[combo][n].id).options[p] = null;
  42.                         count++;
  43.                         vuelta ++;
  44. break;
  45.                     }
  46.  
  47.                 }
  48.  
  49.             }
  50.  
  51.         }
  52. break;
  53.  
  54.     }
  55.  
  56. }
  57.  
  58. ok = val.id;
  59.  
  60. var lista_elementos = '';
  61.     for (var i = 0; i < eliminadosVal.length; i++) {
  62.         for (var p = 0; p < eliminadosVal[i].length; p++) {
  63.             lista_elementos += '<li>' + eliminadosVal[i][p][0][0] + ' <a class="restaurar" href="#" onclick="Redo('+i+');return false;">x</a></li>';
  64.         }
  65.     }
  66.  
  67. getElement('listaEliminados').innerHTML =  lista_elementos;
  68. }
  69.  
  70.  
  71.  
  72.  
  73.  
  74.  
  75.  
  76.  
  77.  
  78. function Redo(arr) {
  79. vuelta = 0;
  80. var lista_elementos = '';
  81. for (var i = 0; i < eliminadosVal[arr].length; i++) {
  82.  
  83.     for (var p = 0; p < eliminadosVal[arr][i].length; p++) {
  84.  
  85.         var reDoOpciones = new Option(eliminadosVal[arr][i][p][0], eliminadosVal[arr][i][p][0]);
  86.  
  87.         if (getElement(eliminadosVal[arr][i][p][2]).options.length == eliminadosVal[arr][i][p][1]) { // Si es la última opción
  88.            
  89.             eval(getElement(eliminadosVal[arr][i][p][2]).options[eliminadosVal[arr][i][p][1]] = reDoOpciones);
  90.  
  91.         } else {
  92.  
  93.             opt = getElement(eliminadosVal[arr][i][p][2]).options.length;
  94.  
  95.             for (var n = getElement(eliminadosVal[arr][i][p][2]).options.length-1; n >= eliminadosVal[arr][i][p][1];  n--) {
  96.  
  97.            
  98.                 var reInsertaOpt = new Option(getElement(eliminadosVal[arr][i][p][2]).options[n].text, getElement(eliminadosVal[arr][i][p][2]).options[n].value);  
  99.                 eval(getElement(eliminadosVal[arr][i][p][2]).options[opt] = reInsertaOpt);
  100.             opt--;
  101.             }
  102.  
  103.                 eval(getElement(eliminadosVal[arr][i][p][2]).options[eliminadosVal[arr][i][p][1]] = reDoOpciones);
  104.         }
  105.  
  106.         eliminadosVal[arr][i][p][3].options[0].selected = 'selected'; // Seleccionamos la primera opción de los select en los que ya ha sido selecciona una opción repetida en otro select
  107.        
  108.  
  109.     }
  110. eliminadosVal[arr].pop();
  111. }
  112.  
  113.  
  114.  
  115. for (var i = 0; i < eliminadosVal.length; i++) {
  116.     for (var p = 0; p < eliminadosVal[i].length; p++) {
  117.         lista_elementos += '<li>' + eliminadosVal[i][p][0][0] + ' <a class="restaurar" href="#" onclick="Redo('+i+');return false;">x</a></li>';
  118.     }
  119. }
  120.  
  121. getElement('listaEliminados').innerHTML =  lista_elementos;
  122. }
  123. </script>
  124. </head>
  125. <body>
  126. <form id="form1" name="form1" method="post" action="">
  127. <select id="regalo_1" name="regalo[]" size="10" onchange="delOpcion(this)">
  128. <option value="">Regalo para Ti</option>
  129. <option value="Moto">Moto</option>
  130. <option value="Coche">Coche</option>
  131. <option value="Barco">Barco</option>
  132. <option value="Bicicleta">Bicicleta</option>
  133. </select>
  134.  
  135. <select id="regalo_2" name="regalo[]" size="10" onchange="delOpcion(this)">
  136. <option value="">Regalo para Padres</option>
  137. <option value="Coche">Coche</option>
  138. <option value="Casa">Casa</option>
  139. <option value="Viaje">Viaje</option>
  140. <option value="Moto">Moto</option>
  141. </select>
  142.  
  143. <select id="regalo_3" name="regalo[]" size="10" onchange="delOpcion(this)">
  144. <option value="">Regalo para Hermanos</option>
  145. <option value="Consola">Consola</option>
  146. <option value="Bicicleta">Bicicleta</option>
  147. <option value="Moto">Moto</option>
  148. <option value="Mp4">Mp4</option>
  149. </select>
  150. </form>
  151.  
  152. <ul id="listaEliminados"></ul>
  153. </body>
  154. </html>
gracias por analizar el código y prestarme tu ayuda
  #7 (permalink)  
Antiguo 20/10/2010, 21:16
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 10 años, 6 meses
Puntos: 1485
Respuesta: eliminar y restaurar opciones select

@isabelm,

estaba trabajando con un ejemplo en base al primer código pero veo que el último código publicado es un tanto distinto. de todos modos lo presento para que analices la forma que antes explicaba, pero sobre todo que te sirva de idea o base para lo que quieres lograr. espero que no tengas problema en analizarlo porque la verdad esta mucho más simplificado. claro, en este ejemplo he eliminado otras características como evitar seleccionar otra opción en el mismo select.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
select{
width:10em;
}
</style>
<script type="text/javascript">
var cache = function(){
var steps = [];
return{
append: function(item){
return steps.push(item);
},

undo: function(){
return steps.pop();
}
}}();

function delOption(select){
var itemCache = [], combo;
for(var i = 0; combo = select.form.elements[select.name][i]; i++){
	if(combo === select) continue;
	for(var j = 0; combo.options[j]; j++) if(select.value == combo.options[j].value){ 
		itemCache.push({owner: combo, index: combo.options[j].index, option: combo.removeChild(combo.options[j])});
		break;
		}
	}
if(itemCache.length) cache.append(itemCache); // add only if not empty;
}

function restore(item){
if(!item) return alert("No more item to restore");
while(item.length){
	var object = item.shift();
	object.owner.add(object.option, object.owner.options[object.index]);
	}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<select id="regalo_1" name="regalo[]" size="10" onchange="delOption(this)">
<option value="">Regalo para Ti</option>
<option value="Moto">Moto</option>
<option value="Coche">Coche</option>
<option value="Barco">Barco</option>
<option value="Bicicleta">Bicicleta</option>
</select>
 
<select id="regalo_2" name="regalo[]" size="10" onchange="delOption(this)">
<option value="">Regalo para Padres</option>
<option value="Coche">Coche</option>
<option value="Casa">Casa</option>
<option value="Viaje">Viaje</option>
<option value="Moto">Moto</option>
</select>
 
<select id="regalo_3" name="regalo[]" size="10" onchange="delOption(this)">
<option value="">Regalo para Hermanos</option>
<option value="Consola">Consola</option>
<option value="Bicicleta">Bicicleta</option>
<option value="Moto">Moto</option>
<option value="Mp4">Mp4</option>
</select>
 
<input type="button" id="deshacer" value="Reestablecer Opciones" onclick="restore(cache.undo());" />
</form>
</body>
</html>
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

Última edición por zerokilled; 20/10/2010 a las 21:53
  #8 (permalink)  
Antiguo 22/10/2010, 08:15
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: eliminar y restaurar opciones select

ahora he estado analizando mentalmente el código y me he dado cuenta de lo alejada que estaba de lo que me indicastes. y yo pensando que lo había entendido.
hay un par de cosas que no entiendo
Cita:
return{
append: function(item){
return steps.push(item);
},

undo: function(){
return steps.pop();
}
}}();
¿Por qué se necesita el return?
¿Qué es lo que hace esos parentesis al final final? Creo entender que es para invocar a la función que está asignada la varible

muchimas gracias por haberte molestado
  #9 (permalink)  
Antiguo 22/10/2010, 13:20
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 10 años, 6 meses
Puntos: 1485
Respuesta: eliminar y restaurar opciones select

buenas... como sabras, return en una funcion devuelve el valor que se le indique. en este caso, la funcion devuelve un objeto literal que contiene dos metodos. es lo mismo como si creara ese objeto literal en una variable y luego al final devolviera esa variable. si se te hace mas facil entenderlo o visualizarlo con una variable, sigue siendo perfectamente valido. es solo una costumbre que tengo de no declarar variables cuando no las considero necesarias. sobre los parentesis, como bien dices, son para invocar la funcion y lo que esta devuelva es asignado a la variable. en fin, el proposito de la funcion era crear un closure del array para que no sea modificado a no ser con los metodos provistos.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #10 (permalink)  
Antiguo 22/10/2010, 16:49
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: eliminar y restaurar opciones select

gracias por la explicación y el código. le he realizado unos pequeños cambios para adaptarlo a los cambios del antepenultimo post. a ver que te parecen
Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
select{
width:10em;
}
</style>
<script type="text/javascript">
function getElement(elElemento) {
return document.getElementById(elElemento);
}

var steps = [];
var cache = function(){
return{
append: function(item){
return steps.push(item);
},

undo: function(indx){
return steps.splice(indx,1);
}
}}();


function delOption(select){
var itemCache = [], combo, lista_elementos = '';
for(var i = 0; combo = select.form.elements[select.name][i]; i++){
if(combo === select) continue;
for(var j = 0; combo.options[j]; j++) if(select.value == combo.options[j].value){
itemCache.push({owner: combo, index: combo.options[j].index, option: combo.removeChild(combo.options[j]), valor: select.value});
break;
}
}

if(itemCache.length) {cache.append(itemCache);} // add only if not empty;

for (var i = 0; i < steps.length; i++) {
lista_elementos += '<li>' + steps[i][0].valor + ' <a class="restaurar" href="#" onclick="restore(cache.undo('+i+'));return false;">x</a></li>';
}

getElement('listaEliminados').innerHTML = lista_elementos;
}


function restore(item){
var lista_elementos = '';
//if(!item) return alert("No more item to restore");
while (item[0].length){
var object = item[0].shift();
object.owner.add(object.option, object.owner.options[object.index]);
}

for (var i = 0; i < steps.length; i++) {
lista_elementos += '<li>' + steps[i][0].valor + ' <a class="restaurar" href="#" onclick="restore(cache.undo('+i+'));return false;">x</a></li>';
}

getElement('listaEliminados').innerHTML = lista_elementos;
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<select id="regalo_1" name="regalo[]" size="10" onchange="delOption(this)">
<option value="">Regalo para Ti</option>
<option value="Moto">Moto</option>
<option value="Coche">Coche</option>
<option value="Barco">Barco</option>
<option value="Bicicleta">Bicicleta</option>
</select>

<select id="regalo_2" name="regalo[]" size="10" onchange="delOption(this)">
<option value="">Regalo para Padres</option>
<option value="Coche">Coche</option>
<option value="Casa">Casa</option>
<option value="Viaje">Viaje</option>
<option value="Moto">Moto</option>
</select>

<select id="regalo_3" name="regalo[]" size="10" onchange="delOption(this)">
<option value="">Regalo para Hermanos</option>
<option value="Consola">Consola</option>
<option value="Bicicleta">Bicicleta</option>
<option value="Moto">Moto</option>
<option value="Mp4">Mp4</option>
</select>

<ul id="listaEliminados"></ul>
</form>
</body>
</html>
solo que encontrado un pequeño fallo, pero no te preocupes por este problemilla, ya me has colaborado con creces.
la expongo a modo informativo para futuras consultas.
  • del combo 1 se seleciona Coche
  • de los otros dos combos cualquier opción que no esté repetida
  • se restaura Coche
  • del combo 2 se seleciona Coche
  • se restaura Coche
ahora queda seleccionado Coche en ambos combos
  #11 (permalink)  
Antiguo 23/10/2010, 15:23
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: eliminar y restaurar opciones select

para corregir el problema que comenté en el anterior post solo hay que insertar la línea de código marcada en rojo entre las otras dos dos
Cita:
for(var j = 0; combo.options[j]; j++) if(select.value == combo.options[j].value){
if (combo.options[j].selected) {combo.options[j].selected = ''}
itemCache.push({owner: combo, index: combo.options[j].index, option: combo.removeChild(combo.options[j]), valor: select.value});

Etiquetas: cache, historial, undo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:31.