crear combobox relacionados dinamicamente 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> </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.
