Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/10/2005, 12:14
ratamaster
 
Fecha de Ingreso: octubre-2004
Ubicación: En algún lugar de la República Oriental del Uruguay
Mensajes: 366
Antigüedad: 19 años, 7 meses
Puntos: 0
Exclamación crear combobox relacionados dinamicamente

Hola gente, bueno mi consulta es un poco complicada.
Resulta que estoy haciendo un CMS, y en una parte ingreso clientes que pueden ser de de diferentes PROVINCIAS, y aparte, de diferentes CIUDADES.

Por lo tanto hace dos días que vengo haciendo dos combobox, el primero que carga las provincias, y el segundo que se actualiza inmediatamente despues de haber seleccionado una provincia con la ciudades de esa provincia.

Como un Cliente puede estar en varias Ciudades de una misma Provincia, o puede estar en diferentes Provincias y deferentes Ciudades, tengo que crear un script que me cree x pares de comboboxes. Ejemplo:

Cliente : "Pedro"
Provincia : "Cordoba"
Ciudad: "Cordoba Capital"

Provinvia: "Cordoba"
Ciudad: "Carlos Paz"

En este caso estoy diciendo que Pedro está en la Provincia de Cordoba, y en las ciudades Cordoba Capital, y Carlos Paz

Pare esto hice el siguiente código javascript, este crea varios comboboxes a medida que toco un botón (este código está en javascript pero en realida el original es una mezcla de php + mysql + javascript) :

Código PHP:
<html>
<
head>
<
title></title>
<
script type="text/javascript">


//esta función es para hacer la actualización del segundo combobox
function selectAsociado(){

province1 document.form1.province1[document.form1.province1.selectedIndex].value
    
if (province1 != 0) {
        
mis_subsecc=eval("secc_sub" province1)
        
num_seccisub mis_subsecc.length
        document
.form1.city1.length num_seccisub
        
        mis_subseccVls
=eval("secc_subVls" province1)
        
num_seccisubVls mis_subseccVls.length
        document
.form1.city1.length num_seccisubVls
    
        
for(i=0;i<num_seccisub;i++){
            
document.form1.city1.options[i].value=mis_subseccVls[i
            
document.form1.city1.options[i].text=mis_subsecc[i]
        }
    }else{
    
document.form1.city1.length 1
    document
.form1.city1.options[0].value "0"
    
document.form1.city1.options[0].text "-"
    
}
    
document.form1.city1.options[0].selected true
}

//textos de las ciudades
var secc_sub1= new Array('---''Villa Carlos Paz''Cosquin''Mina Clavero''La Falda')
var 
secc_sub2= new Array('---''Chacras de Coria''San Rafael''Malargue')

//valores de las ciudades
var secc_subVls1= new Array('0''1''2''3''4')
var 
secc_subVls2= new Array('0''5''6''7')

//esta función es la que crea los combobox dinamicamente
Num=0;
function 
Agregar(){
        
obj=document.getElementById('tabla');
        
f=document.getElementById('fila');
        
Num++;
                
        
elTr=document.createElement('tr');
        
elTr.id='valor'+Num;
        
elTd=document.createElement('td');
        
elTd.innerHTML='Provincia:';
        
elTr.appendChild(elTd);
        
elTd=document.createElement('td');

        
selectf=document.createElement('select');
        
selectf.name='province'+Num;
        
selectf.onchange=selectAsociado;       
        
        
soption0 document.createElement('option');
        
soption0.value "0";
        
soption0.text "Seleccione >>>";
        
selectf.appendChild(soption0);
    
soption1 document.createElement('option');
        
soption1.value "1";
    
soption1.text "Cordoba";
        
selectf.appendChild(soption1);
    
soption2 document.createElement('option');
        
soption2.value "2";
    
soption2.text "Mendoza";
    
selectf.appendChild(soption2);     
        
    
elTr1=document.createElement('tr');
        
elTr1.id='valor'+Num;
        
elTd1=document.createElement('td');
        
elTd1.innerHTML='Ciudad:';
        
elTr1.appendChild(elTd1);
        
elTd1=document.createElement('td');

        
selectf1=document.createElement('select');
        
selectf1.name='city'+Num;
        
        
// añadir boton para borrar
        
bot_delete=document.createElement('input');
        
bot_delete.type='button';
        
bot_delete.value='borrar';
        
bot_delete.setAttribute('borrar','valor'+Num);
        
bot_delete.onclick = function() {
          
obj=document.getElementById('tabla');
          
obj.removeChild(document.getElementById(this.getAttribute('borrar')));
          
obj=document.getElementById('tabla');
          
obj.removeChild(document.getElementById(this.getAttribute('borrar')));
        
Num--;
        }
        
        
elTd.appendChild(selectf);
        
elTd.appendChild(bot_delete);

        
elTr.appendChild(elTd);
        
obj.insertBefore(elTr,f)
        
        
elTd1.appendChild(selectf1);
        
elTd1.appendChild(bot_delete);

        
elTr1.appendChild(elTd1);
        
obj.insertBefore(elTr1,f)
        

        
        return 
Num;
}

</script>

</head>
<body>

<form  method="POST" name="form1">

                                        
<table border="0" cellpadding="0" cellspacing="0" >
    <tbody id="tabla" border="1">              
         <tr id="fila">

         <td>&nbsp;</td>  
        </tr>
</table>
<input type="button" name="duplicate" value="Ingresar otra localidad" onClick="Agregar()"></td>   

</form>
</body>
</html> 

PROBLEMAS QUE TENGO!!!:
1) En IE los los textos de las provincias no aparecen, y cuando selecciono alguno de la lista (aunque no se vean), salta un error de la función selectAsociado(), este error no se cumple en firefox
2) La función selectAsociado() funciona solamente para el primer combobox, si creo uno nuevo esta función no se ejecuta correctamente, osea que el segundo combobox (ciudades), del segundo par creado dinamicamente no se actualiza.

Los invito a que copien el código y lo vean... esto me está volviendo loco!!
Espero haberme explicado bien.

gracias.
__________________
ratamaster