eliminar y restaurar opciones select

IsaBelM · #1 (**permalink**) 18/10/2010, 15:31

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<!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 f = document.form1;
 
for (var i = 0; val.options[i]; i++) {
 
    if (i == val.selectedIndex) {
 
        for (var n = 0, sel = f[combo].length; n < sel; n++) {
 
            if (val.id != f[combo][n].id) {
 
                for (var p = 0; f[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
}
 
 
 
function Redo() {
vuelta = 0;
var cuantos = parseInt(eliminadosVal[4][0]); // de cuantos select se ha eliminado este valor
alert(cuantos);
for (var i = 0; i < cuantos; i++) {
 
    var reDoOpciones = new Option(eliminadosVal[0][i], eliminadosVal[0][i]);
        
    if (getElement(eliminadosVal[2][i]).options.length == eliminadosVal[1][i]) { // si es la última opción del select
 
        eval(getElement(eliminadosVal[2][i]).options[eliminadosVal[1][i]] = reDoOpciones);
 
    } else {
 
        opt = getElement(eliminadosVal[2][i]).options.length;
 
        for (var n = getElement(eliminadosVal[2][i]).options.length-1; n >= eliminadosVal[1][i];  n--) {
 
            var reInsertaOpt = new Option(getElement(eliminadosVal[2][i]).options[n].text, getElement(eliminadosVal[2][i]).options[n].value);   
            eval(getElement(eliminadosVal[2][i]).options[opt] = reInsertaOpt);
        opt--;
        }
 
        eval(getElement(eliminadosVal[2][i]).options[eliminadosVal[1][i]] = reDoOpciones);
    }
 
    eliminadosVal[3][i].options[0].selected = 'selected'; // devolvemos el foco
 
        
}
 
    eliminadosVal[0].splice(0,cuantos);
    eliminadosVal[1].splice(0,cuantos);
    eliminadosVal[2].splice(0,cuantos);
    eliminadosVal[3].splice(0,cuantos);
    eliminadosVal[4].splice(0,1);
 
    if(eliminadosVal[0].length == '') {getElement('deshacer').disabled = true;}
}
</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" onclick="Redo();" disabled="disabled" />
</form>
</body>
</html>

gracias

Panino5001 · #2 (**permalink**) 18/10/2010, 17:14

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 f = document.form1;
 
for (var i = 0; val.options[i]; i++) {
 
    if (i == val.selectedIndex) {
 
        for (var n = 0, sel = f[combo].length; n < sel; n++) {
 
            if (val.id != f[combo][n].id) {
 
                for (var p = 0; f[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>

IsaBelM · #3 (**permalink**) 19/10/2010, 04:59

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

IsaBelM · #4 (**permalink**) 19/10/2010, 13:42

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

zerokilled · #5 (**permalink**) 19/10/2010, 18:54

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.

IsaBelM · #6 (**permalink**) 20/10/2010, 14:45

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
<script type="text/javascript">
function getElement(elElemento) {
return document.getElementById(elElemento);
}
 
 
var vuelta = 0;
var ok = '';
var eliminadosVal = new Array();  
function delOpcion(val) {
var valores = new Array();
var count = 1;
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 f = document.form1;
 
for (var i = 0; val.options[i]; i++) {
 
    if (i == val.selectedIndex) {
 
        for (var n = 0, sel = f[combo].length; n < sel; n++) {
 
            if (val.id != f[combo][n].id) {
 
                for (var p = 0; f[combo][n].options[p]; p++) {
 
                    if (val.value == f[combo][n].options[p].value) {
 
                        eliminados++;
                        valores.push(new Array(val.value,p,f[combo][n].id,val,eliminados));
                            if (count == 1) {
                                eliminadosVal.push(new Array(valores));
                            }                       
                        getElement(f[combo][n].id).options[p] = null;
                        count++;
                        vuelta ++;
break;
                    }
 
                }
 
            }
 
        }
break;
 
    }
 
}
 
ok = val.id;
 
var lista_elementos = '';
    for (var i = 0; i < eliminadosVal.length; i++) {
        for (var p = 0; p < eliminadosVal[i].length; p++) {
            lista_elementos += '<li>' + eliminadosVal[i][p][0][0] + ' <a class="restaurar" href="#" onclick="Redo('+i+');return false;">x</a></li>';
        }
    }
 
getElement('listaEliminados').innerHTML =  lista_elementos;
}
 
 
 
 
 
 
 
 
 
function Redo(arr) {
vuelta = 0;
var lista_elementos = '';
for (var i = 0; i < eliminadosVal[arr].length; i++) {
 
    for (var p = 0; p < eliminadosVal[arr][i].length; p++) {
 
        var reDoOpciones = new Option(eliminadosVal[arr][i][p][0], eliminadosVal[arr][i][p][0]);
 
        if (getElement(eliminadosVal[arr][i][p][2]).options.length == eliminadosVal[arr][i][p][1]) { // Si es la última opción
            
            eval(getElement(eliminadosVal[arr][i][p][2]).options[eliminadosVal[arr][i][p][1]] = reDoOpciones);
 
        } else {
 
            opt = getElement(eliminadosVal[arr][i][p][2]).options.length;
 
            for (var n = getElement(eliminadosVal[arr][i][p][2]).options.length-1; n >= eliminadosVal[arr][i][p][1];  n--) {
 
            
                var reInsertaOpt = new Option(getElement(eliminadosVal[arr][i][p][2]).options[n].text, getElement(eliminadosVal[arr][i][p][2]).options[n].value);   
                eval(getElement(eliminadosVal[arr][i][p][2]).options[opt] = reInsertaOpt);
            opt--;
            }
 
                eval(getElement(eliminadosVal[arr][i][p][2]).options[eliminadosVal[arr][i][p][1]] = reDoOpciones);
        }
 
        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
        
 
    }
eliminadosVal[arr].pop();
}
 
 
 
for (var i = 0; i < eliminadosVal.length; i++) {
    for (var p = 0; p < eliminadosVal[i].length; p++) {
        lista_elementos += '<li>' + eliminadosVal[i][p][0][0] + ' <a class="restaurar" href="#" onclick="Redo('+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="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>
</form>
 
<ul id="listaEliminados"></ul>
</body>
</html>

gracias por analizar el código y prestarme tu ayuda

zerokilled · #7 (**permalink**) 20/10/2010, 20:16

@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>

IsaBelM · #8 (**permalink**) 22/10/2010, 07:15

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

zerokilled · #9 (**permalink**) 22/10/2010, 12:20

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.

IsaBelM · #10 (**permalink**) 22/10/2010, 15:49

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

IsaBelM · #11 (**permalink**) 23/10/2010, 14:23

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});