Yo he seguido estos pasos, que creo parecen mucho más limpios y compresibles. Y con menos complicación y código.
Código PHP:
<script type="text/javascript">
function volcarSelects(emisor, receptor){
// Accedemos a los 2 selects
emisor = document.getElementById(emisor);
receptor = document.getElementById(receptor);
// Obtenemos algunos datos necesarios
posicion = receptor.options.length;
selecionado = emisor.selectedIndex;
if(selecionado != -1) {
volcado = emisor.options[selecionado];
// Volcamos la opcion al select receptor y lo eliminamos del emisor
receptor.options[posicion] = new Option(volcado.text, volcado.value);
emisor.options[selecionado] = null;
}
}
</script>
Y aplicado sobre XHTML seria de la siguiente forma:
<select id="primero" style="width: 200px; height: 100px;" name="primero" multiple="multiple">
<option value="1">Noticias</option>
<option value="2">Inmuebles</option>
<option value="3">Herramientas</option>
<option value="4">Correos</option>
<option value="5">Usuarios</option>
<option value="6">Configuración</option>
</select>
<!-- Fijaros que a la funcion le paso el ID del select que envia y el segundo parametro es el ID que recibe -->
<input type="button" value="→" onclick="volcarSelects('primero', 'segundo');" />
<!-- En este caso quiero poder "quitar" opciones, por lo que invierto el orden de los parametros pasados a la función -->
<input type="button" value="←" onclick="volcarSelects('segundo', 'primero');" />
<select style="width: 200px; height: 100px;" id="segundo" name="segundo" multiple="multiple">
</select>
Espero que os sirva :)