Ver Mensaje Individual
  #5 (permalink)  
Antiguo 01/04/2008, 09:46
maryhanns
 
Fecha de Ingreso: enero-2007
Mensajes: 53
Antigüedad: 18 años
Puntos: 0
Re: Grupos con ListBox

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> 
Cita:
mover-items.js
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=0i<leni++){
        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=leni>=0i--){
            
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=leni>=0i--){
            
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=0i<len; ++i){
            
data += optionList.item(i).value;
            if(
== len-1){
                
data += '';
            }else{
                
data += ',';
            }
        }
        
alert(data);
    }