Dejo mi codigo por si alguien lo necesita:
- Tiene las opciones de mover y remover uno o todos los Items
- Chequear que no este vacio antes de hacer el submit
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>List Box Demo</title>
<script type="text/javascript" src="mover-items.js"></script>
</head>
<body onLoad="createListObjects()">
<table border="0">
<tr>
<td><select size="4" id="availableOptions" name="availableOptions" style="width:100px;">
<option value="option1">
option1
</option>
<option value="option3">
option3
</option>
<option value="option5">
option5
</option>
<option value="option7">
option7
</option>
</select> </td>
<td align="center" valign="top"><button
onclick="addAll()">>>></button><br>
<button onClick="addAttribute()">></button><br>
<button onClick="delAttribute()"><</button><br>
<button onClick="delAll()"><<<</button></td>
<td><select size="4" id="selectedOptions" name="selectedOptions" style="width:100px;">
<option value="option2">
option2
</option>
<option value="option4">
option4
</option>
<option value="option6">
option6
</option>
<option value="option8">
option8
</option>
</select></td>
</tr>
<tr>
<td colspan="3" align="right"><button onclick="showSelected()">Submit</button></td>
</tr>
</table>
</body>
</html>
Código PHP:
// JavaScript Document
var selectedList;
var availableList;
function createListObjects(){
availableList = document.getElementById("availableOptions");
selectedList = document.getElementById("selectedOptions");
}
function delAttribute(){
if(document.getElementById("selectedOptions").options.length < 1){
alert('Ya no hay Items para Remover');
return false;
}else{
var selIndex = selectedList.selectedIndex;
if(selIndex < 0)//Chequea si tiene seleccionado una opción
return;
availableList.appendChild(
selectedList.options.item(selIndex))
selectNone(selectedList,availableList);
setSize(availableList,selectedList);
}
}
function addAttribute(){
if(document.getElementById("availableOptions").options.length < 1){
alert('Ya no hay Items para mover');
return false;
}else{
var addIndex = availableList.selectedIndex;
if(addIndex < 0)//Chequea si tiene seleccionado una opción
return;
selectedList.appendChild(
availableList.options.item(addIndex));
selectNone(selectedList,availableList);
setSize(selectedList,availableList);
}
}
function setTop(top){
document.getElementById
('someLayer').style.top = top;
}
function setLayerTop(lyr,top){
lyr.style.top = top;
}
function setSize(list1,list2){
list1.size = 4;//getSize(list1);//Si queremenos que sea auto
list2.size = 4;//getSize(list2);//Si queremenos que sea auto
}
function selectNone(list1,list2){
list1.selectedIndex = -1;
list2.selectedIndex = -1;
addIndex = -1;
selIndex = -1;
}
function getSize(list){
/* Mozilla ignora los espacios en blanco,
IE no cuenta los elementos en la lista*/
var len = list.childNodes.length;
var nsLen = 0;
//nodeType devuelve 1 a los elementos
for(i=0; i<len; i++){
if(list.childNodes.item(i).nodeType==1)
nsLen++;
}
if(nsLen<2)
return 2;
else
return nsLen;
}
function delAll(){
if(document.getElementById("selectedOptions").options.length < 1){
alert('Ya no hay Items para Remover');
return false;
}else{
var len = selectedList.length -1;
for(i=len; i>=0; i--){
availableList.appendChild(selectedList.item(i));
}
selectNone(selectedList,availableList);
setSize(selectedList,availableList);
}
}
function addAll(){
if(document.getElementById("availableOptions").options.length < 1){
alert('Ya no hay Items para mover');
return false;
}else{
var len = availableList.length -1;
for(i=len; i>=0; i--){
selectedList.appendChild(availableList.item(i));
}
selectNone(selectedList,availableList);
setSize(selectedList,availableList);
}
}
// La funcion del Submit
function showSelected(){
if(document.getElementById("selectedOptions").options.length < 1){
alert('Debe mover al menos 1 Item!');
return false;
}else{
var optionList = document.getElementById("selectedOptions").options;
var data = '';
var len = optionList.length;
for(i=0; i<len; ++i){
data += optionList.item(i).value;
if(i == len-1){
data += '';
}else{
data += ',';
}
}
alert(data);
}
}