El script en PHP sería este:
<?php
mysql_connect("localhost","root","") or die("Unable to connect to SQL server");
@mysql_select_db("data_base_name") or die("Unable to select database");
$provincias_result = mysql_query("select * from PROVINCIA_CR");
echo "var p=new Array();var c=new Array();var d=new Array();";
while ($provincia_row = mysql_fetch_row($provincias_result)) {
echo "p[" . $provincia_row[0] . "]='" . $provincia_row[1] . "';";
$cantones_result = mysql_query("select * from CANTON_CR where codigo_provincia = "
. $provincia_row[0]);
$canton_line = "c[". $provincia_row[0] . "]='";
$distrito_lines = "";
while ($canton_row = mysql_fetch_row($cantones_result)) {
$canton_line = $canton_line . $canton_row[2] ."@" . $canton_row[1] . "~";
$distritos_result = mysql_query("select * from DISTRITO_CR where codigo_canton = "
. $canton_row[0]);
$distrito_line = "d[". $canton_row[1] . "]='";
while ($distrito_row = mysql_fetch_row($distritos_result)) {
$distrito_line .= $distrito_row[2] ."@" . $distrito_row[1] . "~";
}
$distrito_line=substr_replace($distrito_line ,"",-1); // Remueve último caracter.
$distrito_lines .= $distrito_line . "';";
}
$canton_line=substr_replace($canton_line ,"",-1); // Remueve último caracter.
echo $canton_line . "';";
echo $distrito_lines;
}
?>
Este script genera un código como este (también dejo a disposición el script generado):
var p=new Array();var c=new Array();var d=new Array();p[1]='San José';c[1]='San José@1~Escazú@1~Desamparados@1~Puriscal@1~Tarrazú@1~Aserrí@1~Mora@1~Goicoechea@1~Santa Ana@1~Alajuelita@1~Vasquez de Coronado@1~Acosta@1~Tibás@1~Moravia@1~Montes de Oca@1~Turrubares@1~Dota@1~Curridabat@1~Pérez Zeledón@1~León Cortés@1';d[1]='Carmen@101~Merced@101~Hospital@101~Catedral@101~Zapote@101~San Francisco de Dos Ríos@101~Uruca@101~Mata Redonda@101~Pavas@101~Hatillo@101~San Sebastián@101';d[1]='Escazú@102~San Antonio@102~San Rafael@102';d[1]='Desamparados@103~San Miguel@103~San Juan de Dios@103~San Rafael Arriba@103~San Antonio@103~Frailes@103~Patarrá@103~San Cristóbal@103~Rosario@103~Damas@103~San Rafael Abajo@103~Gravilias@103~Los Guido@103';d[1]='Santiago@104~Mercedes Sur@104~Barbacoas@104~Grifo Alto@104~San Rafael@104~Candelaria@104~Desamparaditos@104~San Antonio@104~Chires@104';d[1]='San Marcos@105~San Lorenzo@105~San Carlos@105';d[1]='Aserrí@106~Tarbaca o Praga@106~Vuelta de Jorco@106~San Gabriel@106~La Legua@106~Monterrey@106~Salitrillos@106';d[1]='Colón@107~Guayabo@107~Tabarcia@107~Piedras Negras@107~Picagres@107';d[1]='Guadalupe@108~San Francisco@108~Calle Blancos@108~Mata de Plátano@108~Ipís@108~Rancho Redondo@108~Purral@108';d[1]='Santa Ana@109~Salitral@109~Pozos o Concepción@109~ ...Con ese código se puede agregar lógica JavaScript, sazonada con JQuery, para cargar las opciones dinámicamente:
Código en GitHub
<html>
<head>
<script src="distritos.js" type="text/javascript"></script>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var separator1 = "~";
var separator2 = "@";
function cargarProvincias(provinciaId) {
$("#" + provinciaId).append($("<option></option>")
.attr("value", -1).text("Elija una provincia"));
for (var key in p) {
$("#" + provinciaId).append($("<option></option>")
.attr("value", key).text(p[key]));
}
}
function cargarCantones(provincia, cantonId) {
var provinciaSelectedValue = $(provincia).val();
$("#" + cantonId + " option").remove();
if(provinciaSelectedValue != -1) {
$("#" + cantonId).append($("<option></option>")
.attr("value", -1).text("Elija un cantón"));
var cantones = c[provinciaSelectedValue].split(separator1);
for (var i=0; i < cantones.length; i++) {
var cantonValuePair = cantones[i].split(separator2);
$("#" + cantonId).append($("<option></option>")
.attr("value", cantonValuePair[1]).text(cantonValuePair[0]));
}
} else {
$("#" + cantonId).append($("<option></option>")
.attr("value", -2).text("Elija una provincia"));
}
cargarDistritos($("#" + cantonId), "distritos");
}
function cargarDistritos(canton, distritoId) {
var cantonSelectedValue = $(canton).val();
$("#" + distritoId + " option").remove();
if(cantonSelectedValue > 0) {
$("#" + distritoId).append($("<option></option>")
.attr("value", -1).text("Elija un distrito"));
var distritos = d[cantonSelectedValue].split(separator1);
for (var i=0; i < distritos.length; i++) {
var distritoValuePair = distritos[i].split(separator2);
$("#" + distritoId).append($("<option></option>")
.attr("value", distritoValuePair[1]).text(distritoValuePair[0]));
}
} else if(cantonSelectedValue == -1){
$("#" + distritoId).append($("<option></option>")
.attr("value", -1).text("Elija un cantón"));
} else if(cantonSelectedValue == -2){
$("#" + distritoId).append($("<option></option>")
.attr("value", -1).text("Elija una provincia"));
}
}
</script>
</head>
<body onload="cargarProvincias('provincias')">
<select id="provincias" onchange="cargarCantones(this, 'cantones');"></select>
<select id="cantones" onchange="cargarDistritos(this, 'distritos');"><option value="-2">Elija una provincia</option></select>
<select id="distritos"><option value="-2">Elija una provincia</option></select>
</body>
</html>
Hola amigo, tienes el archivo distrito.js?
ResponderEliminarEste es un post viejillo. Ya lo actualizé para poner el código en GitHub.
Eliminarhttps://github.com/gsolano777/provincias/
Hola Gabriel. Lo descargue de github, ya subí los archivos para probarlos, seleccioné provincia y carga bien los cantones, pero al querer seleccionar los distritos, siempre carga los distritos del ultimo cantón de cada provincia, hasta ahora toco Ajax, por lo cual no puede revisar mucho. Estaré cometiendo algún error. Muchas gracias de antemano.
ResponderEliminarSaludos Greivin. En efecto tenía unos errores. Ya los arreglé. Puedes volver a descargar los archivos o darle git pull si usas Git. Saludos y suerte con el proyecto que estés trabajando.
EliminarY por cierto, con el archivo de distritos.js no se utiliza Ajax puesto que no hay ninguna comunicación con ningún servidor.
EliminarMuchas gracias estimado, listo, muy agradecidos por acá. Pura Vida!
ResponderEliminar