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