<!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>
Si la opción seleccionada, está en los siguientes combos, se eliminará<br />
<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="Moto">Moto</option>
<option value="Coche">Coche</option>
<option value="Barco">Barco</option>
<option value="Bicicleta">Bicicleta</option>
</select>
<select id="regalo_3" name="regalo[]" size="10" onchange="delOpcion(this)">
<option value="">Regalo para Hermanos</option>
<option value="Moto">Moto</option>
<option value="Coche">Coche</option>
<option value="Barco">Barco</option>
<option value="Bicicleta">Bicicleta</option>
</select>
</form>
<ul id="listaEliminados"></ul>
</body>
</html>