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