Yo hago esto, ten en cuenta los id, tienen ques er diferentes, te puse enlaces de ancla pero tu pones la imagen, y colocas todo en una tabla yo te lo coloqué apelotonado
Código:
<script type='text/javascript'>
function selector(s,s2){
if(selected(s)){
putSelect(s2,getTextSelect(s),getValueSelect(s));
delSelect(s);
}
}
function putSelect(id,texto,valor){
var sel=document.getElementById(id);
sel[sel.length]= new Option(texto,valor);
}
function getTextSelect(id){
var sel=document.getElementById(id);
// Obtenemos que posición del SELECT está seleccionada
var indiceSeleccionado = sel.selectedIndex;
// Si hemos seleccionado una opción válida ...
//if (indiceSeleccionado != 0)
// Obtenemos el valor seleccionado
return sel.options[indiceSeleccionado].text;
}
function getValueSelect(id){
var sel=document.getElementById(id);
return sel.value;
}
function delSelect(id){
var sel=document.getElementById(id);
if (sel.selectedIndex >= 0) {
sel.options[sel.selectedIndex]=null;
sel.selectedIndex=0;
}
}
</script>
<select id="s1" class="opciones" size="15">
<option value="directorio">Catálogo</option>
<option value="configuracion">Configuración</option>
<option value="enlace">Enlaces</option>
<optionvalue="rotativo">Rotativo</option>
</select>
<select id="s2" class="opciones" size="15">
<option value="album">Álbum</option>
<option value="contenidos">Contenidos</option>
<option value="disenho">Diseño</option>
<option value="ficha_empresa">Ficha de Empresa</option>
<option value="microweb">Espacios</option><option value="localizacion">Localizacion</option>
</select>
<a href="#" onclick="selector('s2','s1');">Poner</a>
<a href="#" onclick="selector('s1','s2');">Quitar</a>