Actualización del combo
Este es mi problema: tengo una página que tiene dos combos, un combo llamado departamento -se llena mediante una consulta- y el segundo combo llamado municipio -también lo lleno mediante una consulta-, en nicaragua a un departamento le corresponden varios municipios.
Pues bien, yo quiero que al escoger un departamento en el primer combo, automáticamente el segundo combo- el correspondiente a municipio- se llene con los municipios que corresponden al departamento seleccionado, ¿cómo hago esto?
Pues bien, yo quiero que al escoger un departamento en el primer combo, automáticamente el segundo combo- el correspondiente a municipio- se llene con los municipios que corresponden al departamento seleccionado, ¿cómo hago esto?
Respuesta de bobbin
1
Nada mejor que un ejemplo.
El ejemplo serán dos páginas html, en dos frames distintos, aunque se puede hacer lanzando una ventana en lugar de con frames.
Las páginas son:
--------------------------
inicio.html:
<frameset rows="50%,*">
<frame name="uno" src="uno.html">
<frame name="dos" src="about:blank">
</frameset>
-------------------------
uno.html:
<html>
<script>
// Recibe un campo combo y lo vacía.
function vaciar(texto)
{
var miForm = document.pp;
pp.mun.options.length = 0;
pp.mun.options[0] = new Option(texto,"");
}
function agregarmunicipio(valor,texto)
{
var miForm = document.pp;
miForm.mun.options[miForm.mun.options.length] = new Option(texto,valor);
}
function cambiar()
{
var miForm = document.pp;
var departamento;
// Aquí se recoge el valor del combo "dep".
departamento = miForm.dep.options[miForm.dep.selectedIndex].value;
// Si es vacío, vaciamos los municipios.
if (departamento == "")
{
vaciar ("<-- Seleccione un departamento");
}
else
{
// Cargamos la página.
parent.dos.document.location = "dos.html?dep=" + escape(departamento);
}
}
</script>
<body onload="vaciar ('<-- Seleccione un departamento');">
<form name="pp">
<table>
<tr>
<td>Departamento</td>
<td>Municipio</td>
</tr>
<tr>
<td>
<select name="dep" onchange="cambiar();">
<option value=""></option>
<option value="dep1">departamento 1</option>
<option value="dep2">departamento 2</option>
<option value="dep3">departamento 3</option>
</select>
</td>
<td>
<select name="mun">
<option value=""></option>
<option value="mun"><-- Seleccione un municipio</option>
<option value="mun"><-- Seleccione un municipio</option>
<option value="mun"><-- Seleccione un municipio</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
-------------------------
dos.html:
<html>
<script>
function simularrecarga ()
{
// Recuperamos el parámetro y generamos el código para cargar el combo de municipios.
// La recuperación depende del lenguaje, pero el código que hay que generar es parecido para cualquier
// lenguaje.
var dep = document.URL.split("=")[1];
parent.uno.vaciar("<-- Seleccione un municipio");
if (dep == "dep1")
{
parent.uno.agregarmunicipio("uno","Municipio 1-1");
parent.uno.agregarmunicipio("uno","Municipio 1-2");
parent.uno.agregarmunicipio("uno","Municipio 1-3");
parent.uno.agregarmunicipio("uno","Municipio 1-4");
parent.uno.agregarmunicipio("uno","Municipio 1-5");
}
if (dep == "dep2")
{
parent.uno.agregarmunicipio("uno","Municipio 2-1");
parent.uno.agregarmunicipio("uno","Municipio 2-2");
parent.uno.agregarmunicipio("uno","Municipio 2-3");
}
if (dep == "dep3")
{
parent.uno.agregarmunicipio("uno","Municipio 3-1");
parent.uno.agregarmunicipio("uno","Municipio 3-2");
parent.uno.agregarmunicipio("uno","Municipio 3-3");
parent.uno.agregarmunicipio("uno","Municipio 3-4");
parent.uno.agregarmunicipio("uno","Municipio 3-5");
parent.uno.agregarmunicipio("uno","Municipio 3-6");
parent.uno.agregarmunicipio("uno","Municipio 3-7");
parent.uno.agregarmunicipio("uno","Municipio 3-8");
parent.uno.agregarmunicipio("uno","Municipio 3-9");
}
}
</script>
<body onload="simularrecarga();">
</body>
</html>
Ahora veamos qué hacen:
Cuando se cambia el departamento de uno.html, se lanza una función javascript que recoge el parámetro y llama en el frame dos a una página que es la encargada de la recarga.
Para hacer más comprensible el código de la página dos.html y un poco independiente del hecho de que se cambien los nombres de los campos en la página uno.html, llama a funciones de uno.html para actualizar los campos.
En la página dos.html se recoge el código del departamento y se genera el código para recargar el combo de municipio en uno.html.
Si algo no queda claro o desea conocer más no dudes en preguntar.
El ejemplo serán dos páginas html, en dos frames distintos, aunque se puede hacer lanzando una ventana en lugar de con frames.
Las páginas son:
--------------------------
inicio.html:
<frameset rows="50%,*">
<frame name="uno" src="uno.html">
<frame name="dos" src="about:blank">
</frameset>
-------------------------
uno.html:
<html>
<script>
// Recibe un campo combo y lo vacía.
function vaciar(texto)
{
var miForm = document.pp;
pp.mun.options.length = 0;
pp.mun.options[0] = new Option(texto,"");
}
function agregarmunicipio(valor,texto)
{
var miForm = document.pp;
miForm.mun.options[miForm.mun.options.length] = new Option(texto,valor);
}
function cambiar()
{
var miForm = document.pp;
var departamento;
// Aquí se recoge el valor del combo "dep".
departamento = miForm.dep.options[miForm.dep.selectedIndex].value;
// Si es vacío, vaciamos los municipios.
if (departamento == "")
{
vaciar ("<-- Seleccione un departamento");
}
else
{
// Cargamos la página.
parent.dos.document.location = "dos.html?dep=" + escape(departamento);
}
}
</script>
<body onload="vaciar ('<-- Seleccione un departamento');">
<form name="pp">
<table>
<tr>
<td>Departamento</td>
<td>Municipio</td>
</tr>
<tr>
<td>
<select name="dep" onchange="cambiar();">
<option value=""></option>
<option value="dep1">departamento 1</option>
<option value="dep2">departamento 2</option>
<option value="dep3">departamento 3</option>
</select>
</td>
<td>
<select name="mun">
<option value=""></option>
<option value="mun"><-- Seleccione un municipio</option>
<option value="mun"><-- Seleccione un municipio</option>
<option value="mun"><-- Seleccione un municipio</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
-------------------------
dos.html:
<html>
<script>
function simularrecarga ()
{
// Recuperamos el parámetro y generamos el código para cargar el combo de municipios.
// La recuperación depende del lenguaje, pero el código que hay que generar es parecido para cualquier
// lenguaje.
var dep = document.URL.split("=")[1];
parent.uno.vaciar("<-- Seleccione un municipio");
if (dep == "dep1")
{
parent.uno.agregarmunicipio("uno","Municipio 1-1");
parent.uno.agregarmunicipio("uno","Municipio 1-2");
parent.uno.agregarmunicipio("uno","Municipio 1-3");
parent.uno.agregarmunicipio("uno","Municipio 1-4");
parent.uno.agregarmunicipio("uno","Municipio 1-5");
}
if (dep == "dep2")
{
parent.uno.agregarmunicipio("uno","Municipio 2-1");
parent.uno.agregarmunicipio("uno","Municipio 2-2");
parent.uno.agregarmunicipio("uno","Municipio 2-3");
}
if (dep == "dep3")
{
parent.uno.agregarmunicipio("uno","Municipio 3-1");
parent.uno.agregarmunicipio("uno","Municipio 3-2");
parent.uno.agregarmunicipio("uno","Municipio 3-3");
parent.uno.agregarmunicipio("uno","Municipio 3-4");
parent.uno.agregarmunicipio("uno","Municipio 3-5");
parent.uno.agregarmunicipio("uno","Municipio 3-6");
parent.uno.agregarmunicipio("uno","Municipio 3-7");
parent.uno.agregarmunicipio("uno","Municipio 3-8");
parent.uno.agregarmunicipio("uno","Municipio 3-9");
}
}
</script>
<body onload="simularrecarga();">
</body>
</html>
Ahora veamos qué hacen:
Cuando se cambia el departamento de uno.html, se lanza una función javascript que recoge el parámetro y llama en el frame dos a una página que es la encargada de la recarga.
Para hacer más comprensible el código de la página dos.html y un poco independiente del hecho de que se cambien los nombres de los campos en la página uno.html, llama a funciones de uno.html para actualizar los campos.
En la página dos.html se recoge el código del departamento y se genera el código para recargar el combo de municipio en uno.html.
Si algo no queda claro o desea conocer más no dudes en preguntar.
10 respuestas más de otros expertos
Respuesta de yareaj
1
La respuesta es: usando un script de JavaScript (p. Ej.). En el 1er combo, en el evento OnChange (cuando cambie el valor) llamas a una función (script que cargas en la página, ya sabes en el HEAD)
En este script haces un
location.reload "tupaginaencurso.asp?primercombo=" & valordelprimercombo
Cuando se autocarga la página evalúa el valordelprimercombo, lo busca en la tabla y genera la lista de los valores del segundo combo.
Hay más miga pero como base ya puedes tirar por algún lado, investiga y si te encuentras con más problemas, me avisas.
En este script haces un
location.reload "tupaginaencurso.asp?primercombo=" & valordelprimercombo
Cuando se autocarga la página evalúa el valordelprimercombo, lo busca en la tabla y genera la lista de los valores del segundo combo.
Hay más miga pero como base ya puedes tirar por algún lado, investiga y si te encuentras con más problemas, me avisas.
Respuesta de arunchi
1
Tenés 2 alternativas:
1) Ponerle un botón al usuario que diga "Refresar municipios" y que sea de tipo submit. Para tocarlo, previamente debe de haber elegido un país. Cuando le diste submit, te fijás que código de país te eligió y tiras la consulta para traerte los municipios del país. Con esta consulta llenás el combo de municipios.
2) Darle submit al formulario en el evento onchange del combo. Cada vez que el usuario te cambie el país, el formulario se va a submitear autómaticamente, de esta manera recibirás el código del país elegido y podrás tirar la consulta para traer los municipios.
1) Ponerle un botón al usuario que diga "Refresar municipios" y que sea de tipo submit. Para tocarlo, previamente debe de haber elegido un país. Cuando le diste submit, te fijás que código de país te eligió y tiras la consulta para traerte los municipios del país. Con esta consulta llenás el combo de municipios.
2) Darle submit al formulario en el evento onchange del combo. Cada vez que el usuario te cambie el país, el formulario se va a submitear autómaticamente, de esta manera recibirás el código del país elegido y podrás tirar la consulta para traer los municipios.
Perdón, pero si no es mucha molestia no tendrás algún ejemplo por ahí, ¿de la segunda solución que me planteás?
Gracias y disculpas
Gracias y disculpas
Suponiendo que tu formulario tiene como atributo id a "theForm", hacés lo siguiente
<!-- COMBO DE PAISES -->
<select name=cmbPaises id=cmbPaises onchange="theForm.submit();">
<option value="1">Argentina</option>
<option value="2">Brasil</option>
</select>
De esta manera, cada vez que elijas un país distinto, el formulario se submitea. Desde código de servidor, tirarías la consulta igual que la tiraste para llenar el combo de países.
<!-- COMBO DE PAISES -->
<select name=cmbPaises id=cmbPaises onchange="theForm.submit();">
<option value="1">Argentina</option>
<option value="2">Brasil</option>
</select>
De esta manera, cada vez que elijas un país distinto, el formulario se submitea. Desde código de servidor, tirarías la consulta igual que la tiraste para llenar el combo de países.
Respuesta de smunoz
1
Lo normal es, al detectar el evento "onclick" del primer combo, volver a cargar la página con el elemento del primer combo seleccionado y el segundo combo con los municipios correspondientes.
Una manera más elegante sería poner un solo combo (el de departamentos) y utilizar un iFrame, dentro del cual habría una página con un único combo (el de municipios). Al hacer clic en el primero se actualiza la página del iFrame que contiene el segundo.
Una manera más elegante sería poner un solo combo (el de departamentos) y utilizar un iFrame, dentro del cual habría una página con un único combo (el de municipios). Al hacer clic en el primero se actualiza la página del iFrame que contiene el segundo.
Por favor, te ruego que me envíes un ejemplo, porque ando perdido.
Gracias
Gracias
Brevemente, y de memoria:
<form name=frmcombo1 action="procesar.asp" onsubmit="enviar()">
<select name=depts onclick="refresca()">
<%
... aquí el código para llenar este combo
%>
</select>
<input type=hidden name=municipios>
<iframe src="combo2.asp">
</iframe>
<input type=submit>
<script language="javascript">
refresca()
{
self.frames[0].location.replace("combo2.asp?dept="+frmcombo1.depts.value)
}
enviar()
{
frmcombo1.municipios.value=self.frames[0].document.all.frmcombo2.municipios.value
}
</script>
La página "combo2.asp" debe leer el parámetro "depts" para cargar el combo convenientemente. El formulario se llamaría "frmcombo2", y el combo "municipios".
La función "refrescar()" actualiza el combo2 al seleccionar un elemento del combo1. La función "enviar()" lee el valor del combo2 y lo pone en una variable oculta que pasará a la página "procesar.asp".
Este código es posible que no te funcione tal cual, pero puedes depurarlo y ponerlo a tu gusto.
<form name=frmcombo1 action="procesar.asp" onsubmit="enviar()">
<select name=depts onclick="refresca()">
<%
... aquí el código para llenar este combo
%>
</select>
<input type=hidden name=municipios>
<iframe src="combo2.asp">
</iframe>
<input type=submit>
<script language="javascript">
refresca()
{
self.frames[0].location.replace("combo2.asp?dept="+frmcombo1.depts.value)
}
enviar()
{
frmcombo1.municipios.value=self.frames[0].document.all.frmcombo2.municipios.value
}
</script>
La página "combo2.asp" debe leer el parámetro "depts" para cargar el combo convenientemente. El formulario se llamaría "frmcombo2", y el combo "municipios".
La función "refrescar()" actualiza el combo2 al seleccionar un elemento del combo1. La función "enviar()" lee el valor del combo2 y lo pone en una variable oculta que pasará a la página "procesar.asp".
Este código es posible que no te funcione tal cual, pero puedes depurarlo y ponerlo a tu gusto.
Respuesta de polacocl
1
Te voy a mostrar un código que programé, y comentaré la mayoría de las líneas. Así lo adaptas a tus necesidades.
Son 2 Combos, Región y Comuna, para las cuales, a cada Región le corresponen varias Comunas...
<!-- Inicio Combo Región -->
<select size="1" name="c_reg_id" OnChange="javascript: func_comunas(this.value, document.frm_principal.c_com_id);">
<option value="0">Desconocida</option>
<option value="1">I - Tarapacá</option>
<option value="2">II - Antofagasta</option>
<option value="3">III - Atacama</option>
<option value="4">IV - Coquimbo</option>
<option value="5">V - Valparaíso</option>
<option value="6">VI - O'Higgins</option>
<option value="7">VII - Maule</option>
<option value="8">VIII - Bío-Bío</option>
<option value="9">IX - Araucanía</option>
<option value="10">X - Los Lagos</option>
<option value="11">XI - Aysén</option>
<option value="12">XII - Magallanes</option>
<option value="13">RM - Metropolitana</option>
</select>
<!-- Fin Combo Región -->
Este es el Combo de Regiones... como ves, cuando su valor cambie, ejecutará la función "func_comunas", que pasa como primer parámetro el valor del combo Regiones y como segundo parámetro pasa el OBJETO Comunas, es decir, pasa todo el combo como parámetro.
El combo comunas
<!-- Inicio Combo Comuna -->
<select size="1" name="c_com_id">
<option value="1"> Desconocida</option>
</select>
<!-- Fin Combo Comuna -->
Yo lo dejo así, ya que como por defecto dejo en Regiones una región desconocida, acá hago lo mismo.
Bueno, hasta el momento sólo te he mostrado el HTML, ahora vamos al JavaScript.
<!-- Inicio JavaScript -->
<script language="JavaScript">
// Acá, creo un Array con todos los ID de las comunas
// Lo hago desde la base de datos, esto fue escrito mediante un SELECT a la base de datos
// OJO, que el SELECT tiene un ORDER BY el cual puedes
// escoger a tu gusto, PERO todos los demás SELECT deberán
// tener el mismo ORDER BY
var ar_com_id=new Array("45","83","21","281","30","250","12","198","199","2","323","84","200","46","201","13","282","22","47","85","48","3","4","31","202","251","49","50","283","51","168","86","87","284","23","169","135","203","324","204","205","136","285","325","206","286","326","137","207","208","138","170","5","88","252","139","32","52","209","89","171","210","24","33","211","287","327","253","254","90","288","212","255","172","173","289","25","140","91","213","92","53","54","174","256","93","214","257","26","290","291","292","293","258","6","259","141","328","55","294","175","215","7","27","94","34","95","8","96","56","57","97","58","142","98","99","35","59","100","101","36","295","296","329","333","216","102","297","143","103","260","217","176","60","177","144","298","61","104","105","106","145","261","178","262","218","62","219","299","300","263","37","220","264","146","107","301","108","147","148","14","109","302","179","303","15","265","110","180","38","149","221","222","150","334","335","151","223","224","225","63","266","111","330","152","16","64","304","39","112","267","113","40","305","114","306","153","307","65","66","154","181","182","183","226","115","116","184","227","155","268","67","156","9","157","158","228","117","269","159","229","336","10","337","118","68","270","119","120","308","309","310","160","41","338","311","271","312","69","11","313","314","315","316","230","121","231","232","70","71","317","161","122","72","233","162","234","185","123","272","124","163","164","186","73","318","187","42","331","319","339","188","273","189","43","74","125","235","190","75","236","76","165","340","237","191","126","127","320","128","238","321","129","17","239","192","130","240","166","167","241","77","131","78","18","242","132","193","243","19","274","194","275","28","133","341","244","20","276","245","342","332","277","246","247","322","29","79","195","278","44","279","196","80","280","81","134","197","248","249","82");
//Lo mismo, pero ahora con el nombre de la Comuna
var ar_com_nombre=new Array("Algarrobo","Alhue","Alto Del Carmen","Ancud","Andacollo","Angol","Antofagasta","Antuco","Arauco","Arica","Aysen","Buin","Bulnes","Cabildo","Cabrero","Calama","Calbuco","Caldera","Calera","Calera de Tango","Calle Larga","Camarones","Camiña","Canela","Cañete","Carahue","Cartagena","Casablanca","Castro","Catemu","Cauquenes","Cerrillos","Cerro Navia","Chaiten","Chañaral","Chanco","Chepica","Chiguayante","Chile Chico","Chillan","Chillan Viejo","Chimbarongo","Chonchi","Cisnes","Cobquecura","Cochamo","Cochrane","Codegua","Coelemu","Coihueco","Coinco","Colbun","Colchane","Colina","Collipulli","Coltauco","Combarbala","Con Con","Concepcion","Conchali","Constitucion","Contulmo","Copiapo","Coquimbo","Coronel","Corral","Coyhaique","Cunco","Curacautin","Curacavi","Curaco de Velez","Curanilahue","Curarrehue","Curepto","Curico","Dalcahue","Diego de Almagro","Doñihue","El Bosque","El Carmen","El Monte","El Quisco","El Tabo","Empedrado","Ercilla","Estacion Central","Florida","Freire","Freirina","Fresia","Frutillar","Futaleufu","Futrono","Galvarino","General Lagos","Gorbea","Graneros","Guaitecas","Hijuelas","Hualaihue","Hualañe","Hualqui","Huara","Huasco","Huechuraba","Illapel","Independencia","Iquique","Isla de Maipo","Isla de Pascua","Juan Fernandez","La Cisterna","La Cruz","La Estrella","La Florida","La Granja","La Higuera","La Ligua","La Pintana","La Reina.","La Serena","La Union","Lago Ranco","Lago Verde","Laguna Blanca","Laja","Lampa","Lanco","Las Cabras","Las Condes","Lautaro","Lebu","Licanten","Limache","Linares","Litueche","Llanquihue","Llay-Llay","Lo Barnechea","Lo Espejo","Lo Prado","Lolol","Loncoche","Longavi","Lonquimay","Los Alamos","Los Andes","Los Angeles","Los Lagos","Los Muermos","Los Sauces","Los Vilos","Lota","Lumaco","Machali","Macul","Mafil","Maipu","Malloa","Marchigue","Maria Elena","Maria Pinto","Mariquina","Maule","Maullin","Mejillones","Melipeuco","Melipilla","Molina","Monte Patria","Mostazal","Mulchen","Nacimiento","Nancagua","Natales","Navarino","Navidad","Negrete","Ninhue","Ñiquen","Nogales","Nueva Imperial","Ñuñoa","Ohiggins","Olivar","Ollague","Olmue","Osorno","Ovalle","Pac","Padre de Las Casas","Padre Hurtado","Paihuano","Paillaco","Paine","Palena","Palmilla","Panguipulli","Panquehue","Papudo","Paredones","Parral","Pelarco","Pelluhue","Pemuco","Peñaflor","Peñalolen","Pencahue","Penco","Peralillo","Perquenco","Petorca","Peumo","Pica","Pichidegua","Pichilemu","Pinto","Pirque","Pitrufquen","Placilla","Portezuelo","Porvenir","Pozo Almonte","Primavera","Providencia","Puchuncavi","Pucon","Pudahuel","Puente Alto","Puerto Montt","Puerto Octay","Puerto Varas","Pumanque","Punitaqui","Punta Arenas","Puqueldon","Puren","Purranque","Putaendo","Putre","Puyehue","Queilen","Quellon","Quemchi","Quilaco","Quilicura","Quilleco","Quillon","Quillota","Quilpue","Quinchao","Quinta de Tilcoco","Quinta Normal","Quintero","Quirihue","Rancagua","Ranquil","Rauco","Recoleta","Renaico","Renca","Rengo","Requinoa","Retiro","Rinconada","Rio Bueno","Rio Claro","Rio Hurtado","Rio Ibañez","Rio Negro","Rio Verde","Romeral","Saavedra","Sagrada Familia","Salamanca","San Antonio","San Bernardo","San Carlos","San Clemente","San Esteban","San Fabian","San Felipe","San Fernando","San Gregorio","San Ignacio","San Javier","San Joaquin","San Jose de Maipo","San Juan de La Costa","San Miguel","San Nicolas","San Pablo","San Pedro","San Pedro de Atacama","San Pedro de La Paz","San Rafael","San Ramon","San Rosendo","San Vicente","Santa Cruz","Santa Juana","Santa Maria","Santiago","Santo Domingo","Sierra Gorda","Sta. Barbara","Talagante","Talca","Talcahuano","Taltal","Temuco","Teno","Teodoro Schmidt","Tierra Amarilla","Til-Til","Timaukel","Tiura","Tocopilla","Tolten","Tome","Torres Del Paine","Tortel","Traiguen","Trehuaco","Tucapel","Valdivia","Vallenar","Valparaiso","Vichuquen","Victoria","Vicuña","Vilcun","Villa Alegre","Villa Alemana","Villarrica","Viña Del Mar","Vitacura","Yerbas Buenas","Yumbel","Yungay","Zapallar");
//En este Array ponemos el ID de Región que corresponde a la Comuna
//Nuevamente hago hincapié a que debes hacer el mismo orden.
var ar_reg_id=new Array("5","13","3","10","4","9","2","8","8","1","11","13","8","5","8","2","10","3","5","13","5","1","1","4","8","9","5","5","10","5","7","13","13","10","3","7","6","8","11","8","8","6","10","11","8","10","11","6","8","8","6","7","1","13","9","6","4","5","8","13","7","8","3","4","8","10","11","9","9","13","10","8","9","7","7","10","3","6","13","8","13","5","5","7","9","13","8","9","3","10","10","10","10","9","1","9","6","11","5","10","7","8","1","3","13","4","13","1","13","5","5","13","5","6","13","13","4","5","13","13","4","10","10","11","12","8","13","10","6","13","9","8","7","5","7","6","10","5","13","13","13","6","9","7","9","8","5","8","10","10","9","4","8","9","6","13","10","13","6","6","2","13","10","7","10","2","9","13","7","4","6","8","8","6","12","12","6","8","8","8","5","9","13","11","6","2","5","10","4","13","9","13","4","10","13","10","6","10","5","5","6","7","7","7","8","13","13","7","8","6","9","5","6","1","6","6","8","13","9","6","8","12","1","12","13","5","9","13","13","10","10","10","6","4","12","10","9","10","5","1","10","10","10","10","8","13","8","8","5","5","10","6","13","5","8","6","8","7","13","9","13","6","6","7","5","10","7","4","11","10","12","7","9","7","4","5","13","8","7","5","8","5","6","12","8","7","13","13","10","13","8","10","13","2","8","7","13","8","6","6","8","5","13","5","2","8","13","7","8","2","9","7","9","3","13","12","8","2","9","8","12","11","9","8","8","10","3","5","7","9","4","9","7","5","9","5","13","7","8","8","5");
//Y acá ponemos el total de Registros, es decir, el total de comunas.
var total_comunas = 341
//Aquí comienza lo interesante
//La función recibe el valor de la actual Región
//y el objeto Comuna (completo por referencia)
function func_comunas(id_reg, obj_comuna){
//Pongo el primer OPTION en el combo Comunas
conta = 1;
obj_comuna.options.length = conta;
obj_comuna.options[conta - 1].value = 1;
obj_comuna.options[conta - 1].text = "Desconocida";
// Lo ves?
// No es nada complicado, esa es la sintaxis
conta = 2;
//Hago un FOR para todas las comunas
for(i=0;i<total_comunas;i++) {
//Aquí pregunto si la región de la comuna 'i'
//corresponde a la seleccionada por el usuario, es decir, la que viene
//como parametro de la función
if(ar_reg_id==id_reg) {
//si es así, entonces agrego la comuna al combo comunas
//Nota lo importante de la variable 'conta'
//Con ella, agrandamos o encogimos el combo comunas
obj_comuna.options.length = conta;
obj_comuna.options[conta - 1].value = ar_com_id;
obj_comuna.options[conta - 1].text = ar_com_nombre;
conta = conta + 1;
}
}
}
</script>
<!-- Fin JavaScript -->
Puedes comiar estos códigos, ponerlos en una página y debería funcionarte. De todas formas, por el problema del tipo de fuente en esta página (todo expertos) te recomiendo copiar y pegar esta respuesta en un editor de texto con la fuente de ancho fijo.
Espero haber ayudado, cualquier duda con respecto al código, me la haces llegar, ok, nos vemos
Miguel Peredo
Chile
Son 2 Combos, Región y Comuna, para las cuales, a cada Región le corresponen varias Comunas...
<!-- Inicio Combo Región -->
<select size="1" name="c_reg_id" OnChange="javascript: func_comunas(this.value, document.frm_principal.c_com_id);">
<option value="0">Desconocida</option>
<option value="1">I - Tarapacá</option>
<option value="2">II - Antofagasta</option>
<option value="3">III - Atacama</option>
<option value="4">IV - Coquimbo</option>
<option value="5">V - Valparaíso</option>
<option value="6">VI - O'Higgins</option>
<option value="7">VII - Maule</option>
<option value="8">VIII - Bío-Bío</option>
<option value="9">IX - Araucanía</option>
<option value="10">X - Los Lagos</option>
<option value="11">XI - Aysén</option>
<option value="12">XII - Magallanes</option>
<option value="13">RM - Metropolitana</option>
</select>
<!-- Fin Combo Región -->
Este es el Combo de Regiones... como ves, cuando su valor cambie, ejecutará la función "func_comunas", que pasa como primer parámetro el valor del combo Regiones y como segundo parámetro pasa el OBJETO Comunas, es decir, pasa todo el combo como parámetro.
El combo comunas
<!-- Inicio Combo Comuna -->
<select size="1" name="c_com_id">
<option value="1"> Desconocida</option>
</select>
<!-- Fin Combo Comuna -->
Yo lo dejo así, ya que como por defecto dejo en Regiones una región desconocida, acá hago lo mismo.
Bueno, hasta el momento sólo te he mostrado el HTML, ahora vamos al JavaScript.
<!-- Inicio JavaScript -->
<script language="JavaScript">
// Acá, creo un Array con todos los ID de las comunas
// Lo hago desde la base de datos, esto fue escrito mediante un SELECT a la base de datos
// OJO, que el SELECT tiene un ORDER BY el cual puedes
// escoger a tu gusto, PERO todos los demás SELECT deberán
// tener el mismo ORDER BY
var ar_com_id=new Array("45","83","21","281","30","250","12","198","199","2","323","84","200","46","201","13","282","22","47","85","48","3","4","31","202","251","49","50","283","51","168","86","87","284","23","169","135","203","324","204","205","136","285","325","206","286","326","137","207","208","138","170","5","88","252","139","32","52","209","89","171","210","24","33","211","287","327","253","254","90","288","212","255","172","173","289","25","140","91","213","92","53","54","174","256","93","214","257","26","290","291","292","293","258","6","259","141","328","55","294","175","215","7","27","94","34","95","8","96","56","57","97","58","142","98","99","35","59","100","101","36","295","296","329","333","216","102","297","143","103","260","217","176","60","177","144","298","61","104","105","106","145","261","178","262","218","62","219","299","300","263","37","220","264","146","107","301","108","147","148","14","109","302","179","303","15","265","110","180","38","149","221","222","150","334","335","151","223","224","225","63","266","111","330","152","16","64","304","39","112","267","113","40","305","114","306","153","307","65","66","154","181","182","183","226","115","116","184","227","155","268","67","156","9","157","158","228","117","269","159","229","336","10","337","118","68","270","119","120","308","309","310","160","41","338","311","271","312","69","11","313","314","315","316","230","121","231","232","70","71","317","161","122","72","233","162","234","185","123","272","124","163","164","186","73","318","187","42","331","319","339","188","273","189","43","74","125","235","190","75","236","76","165","340","237","191","126","127","320","128","238","321","129","17","239","192","130","240","166","167","241","77","131","78","18","242","132","193","243","19","274","194","275","28","133","341","244","20","276","245","342","332","277","246","247","322","29","79","195","278","44","279","196","80","280","81","134","197","248","249","82");
//Lo mismo, pero ahora con el nombre de la Comuna
var ar_com_nombre=new Array("Algarrobo","Alhue","Alto Del Carmen","Ancud","Andacollo","Angol","Antofagasta","Antuco","Arauco","Arica","Aysen","Buin","Bulnes","Cabildo","Cabrero","Calama","Calbuco","Caldera","Calera","Calera de Tango","Calle Larga","Camarones","Camiña","Canela","Cañete","Carahue","Cartagena","Casablanca","Castro","Catemu","Cauquenes","Cerrillos","Cerro Navia","Chaiten","Chañaral","Chanco","Chepica","Chiguayante","Chile Chico","Chillan","Chillan Viejo","Chimbarongo","Chonchi","Cisnes","Cobquecura","Cochamo","Cochrane","Codegua","Coelemu","Coihueco","Coinco","Colbun","Colchane","Colina","Collipulli","Coltauco","Combarbala","Con Con","Concepcion","Conchali","Constitucion","Contulmo","Copiapo","Coquimbo","Coronel","Corral","Coyhaique","Cunco","Curacautin","Curacavi","Curaco de Velez","Curanilahue","Curarrehue","Curepto","Curico","Dalcahue","Diego de Almagro","Doñihue","El Bosque","El Carmen","El Monte","El Quisco","El Tabo","Empedrado","Ercilla","Estacion Central","Florida","Freire","Freirina","Fresia","Frutillar","Futaleufu","Futrono","Galvarino","General Lagos","Gorbea","Graneros","Guaitecas","Hijuelas","Hualaihue","Hualañe","Hualqui","Huara","Huasco","Huechuraba","Illapel","Independencia","Iquique","Isla de Maipo","Isla de Pascua","Juan Fernandez","La Cisterna","La Cruz","La Estrella","La Florida","La Granja","La Higuera","La Ligua","La Pintana","La Reina.","La Serena","La Union","Lago Ranco","Lago Verde","Laguna Blanca","Laja","Lampa","Lanco","Las Cabras","Las Condes","Lautaro","Lebu","Licanten","Limache","Linares","Litueche","Llanquihue","Llay-Llay","Lo Barnechea","Lo Espejo","Lo Prado","Lolol","Loncoche","Longavi","Lonquimay","Los Alamos","Los Andes","Los Angeles","Los Lagos","Los Muermos","Los Sauces","Los Vilos","Lota","Lumaco","Machali","Macul","Mafil","Maipu","Malloa","Marchigue","Maria Elena","Maria Pinto","Mariquina","Maule","Maullin","Mejillones","Melipeuco","Melipilla","Molina","Monte Patria","Mostazal","Mulchen","Nacimiento","Nancagua","Natales","Navarino","Navidad","Negrete","Ninhue","Ñiquen","Nogales","Nueva Imperial","Ñuñoa","Ohiggins","Olivar","Ollague","Olmue","Osorno","Ovalle","Pac","Padre de Las Casas","Padre Hurtado","Paihuano","Paillaco","Paine","Palena","Palmilla","Panguipulli","Panquehue","Papudo","Paredones","Parral","Pelarco","Pelluhue","Pemuco","Peñaflor","Peñalolen","Pencahue","Penco","Peralillo","Perquenco","Petorca","Peumo","Pica","Pichidegua","Pichilemu","Pinto","Pirque","Pitrufquen","Placilla","Portezuelo","Porvenir","Pozo Almonte","Primavera","Providencia","Puchuncavi","Pucon","Pudahuel","Puente Alto","Puerto Montt","Puerto Octay","Puerto Varas","Pumanque","Punitaqui","Punta Arenas","Puqueldon","Puren","Purranque","Putaendo","Putre","Puyehue","Queilen","Quellon","Quemchi","Quilaco","Quilicura","Quilleco","Quillon","Quillota","Quilpue","Quinchao","Quinta de Tilcoco","Quinta Normal","Quintero","Quirihue","Rancagua","Ranquil","Rauco","Recoleta","Renaico","Renca","Rengo","Requinoa","Retiro","Rinconada","Rio Bueno","Rio Claro","Rio Hurtado","Rio Ibañez","Rio Negro","Rio Verde","Romeral","Saavedra","Sagrada Familia","Salamanca","San Antonio","San Bernardo","San Carlos","San Clemente","San Esteban","San Fabian","San Felipe","San Fernando","San Gregorio","San Ignacio","San Javier","San Joaquin","San Jose de Maipo","San Juan de La Costa","San Miguel","San Nicolas","San Pablo","San Pedro","San Pedro de Atacama","San Pedro de La Paz","San Rafael","San Ramon","San Rosendo","San Vicente","Santa Cruz","Santa Juana","Santa Maria","Santiago","Santo Domingo","Sierra Gorda","Sta. Barbara","Talagante","Talca","Talcahuano","Taltal","Temuco","Teno","Teodoro Schmidt","Tierra Amarilla","Til-Til","Timaukel","Tiura","Tocopilla","Tolten","Tome","Torres Del Paine","Tortel","Traiguen","Trehuaco","Tucapel","Valdivia","Vallenar","Valparaiso","Vichuquen","Victoria","Vicuña","Vilcun","Villa Alegre","Villa Alemana","Villarrica","Viña Del Mar","Vitacura","Yerbas Buenas","Yumbel","Yungay","Zapallar");
//En este Array ponemos el ID de Región que corresponde a la Comuna
//Nuevamente hago hincapié a que debes hacer el mismo orden.
var ar_reg_id=new Array("5","13","3","10","4","9","2","8","8","1","11","13","8","5","8","2","10","3","5","13","5","1","1","4","8","9","5","5","10","5","7","13","13","10","3","7","6","8","11","8","8","6","10","11","8","10","11","6","8","8","6","7","1","13","9","6","4","5","8","13","7","8","3","4","8","10","11","9","9","13","10","8","9","7","7","10","3","6","13","8","13","5","5","7","9","13","8","9","3","10","10","10","10","9","1","9","6","11","5","10","7","8","1","3","13","4","13","1","13","5","5","13","5","6","13","13","4","5","13","13","4","10","10","11","12","8","13","10","6","13","9","8","7","5","7","6","10","5","13","13","13","6","9","7","9","8","5","8","10","10","9","4","8","9","6","13","10","13","6","6","2","13","10","7","10","2","9","13","7","4","6","8","8","6","12","12","6","8","8","8","5","9","13","11","6","2","5","10","4","13","9","13","4","10","13","10","6","10","5","5","6","7","7","7","8","13","13","7","8","6","9","5","6","1","6","6","8","13","9","6","8","12","1","12","13","5","9","13","13","10","10","10","6","4","12","10","9","10","5","1","10","10","10","10","8","13","8","8","5","5","10","6","13","5","8","6","8","7","13","9","13","6","6","7","5","10","7","4","11","10","12","7","9","7","4","5","13","8","7","5","8","5","6","12","8","7","13","13","10","13","8","10","13","2","8","7","13","8","6","6","8","5","13","5","2","8","13","7","8","2","9","7","9","3","13","12","8","2","9","8","12","11","9","8","8","10","3","5","7","9","4","9","7","5","9","5","13","7","8","8","5");
//Y acá ponemos el total de Registros, es decir, el total de comunas.
var total_comunas = 341
//Aquí comienza lo interesante
//La función recibe el valor de la actual Región
//y el objeto Comuna (completo por referencia)
function func_comunas(id_reg, obj_comuna){
//Pongo el primer OPTION en el combo Comunas
conta = 1;
obj_comuna.options.length = conta;
obj_comuna.options[conta - 1].value = 1;
obj_comuna.options[conta - 1].text = "Desconocida";
// Lo ves?
// No es nada complicado, esa es la sintaxis
conta = 2;
//Hago un FOR para todas las comunas
for(i=0;i<total_comunas;i++) {
//Aquí pregunto si la región de la comuna 'i'
//corresponde a la seleccionada por el usuario, es decir, la que viene
//como parametro de la función
if(ar_reg_id==id_reg) {
//si es así, entonces agrego la comuna al combo comunas
//Nota lo importante de la variable 'conta'
//Con ella, agrandamos o encogimos el combo comunas
obj_comuna.options.length = conta;
obj_comuna.options[conta - 1].value = ar_com_id;
obj_comuna.options[conta - 1].text = ar_com_nombre;
conta = conta + 1;
}
}
}
</script>
<!-- Fin JavaScript -->
Puedes comiar estos códigos, ponerlos en una página y debería funcionarte. De todas formas, por el problema del tipo de fuente en esta página (todo expertos) te recomiendo copiar y pegar esta respuesta en un editor de texto con la fuente de ancho fijo.
Espero haber ayudado, cualquier duda con respecto al código, me la haces llegar, ok, nos vemos
Miguel Peredo
Chile
Hola antes que nada, muchísimas gracias por el ejemplo, te iba a puntuar, pero no puedo porque en mis browsers, tu respuesta esta rara, no me aparecen los botones de bueno, excelente, etc, es por eso que no te puedo puntuar, pero realmente te lo digo ahorita, tu respuesta esta fabulosa
Gracias y un saludo
Gracias y un saludo
Ok, pero cuando puedas, hazlo
Quizás estén al lado derecho... busca bien, la respuesta deformó toda la página
Respuesta de Julian Ruesjas
1
Utiliza este código inserto en el html:
<SCRIPT language=VBScript>
Function salto(donde)
buscador.submit
end function
</SCRIPT>
y en el primer combo (que va a estar dentro de un form):
<select name="combo1" onchange="salto(this.options[this.selectedIndex].value)">
Esto hará que salte automáticamente, luego de seleccionado cualquier item del primer combo, recargándose el mismo archivo (como lo especifica el <form action=...> y tomas la variable combo1 para listar los items en el segundo combo.
Cualquier consulta no dudes en escribir.
Atentamente
Julián Ruesjas
Argentina
<SCRIPT language=VBScript>
Function salto(donde)
buscador.submit
end function
</SCRIPT>
y en el primer combo (que va a estar dentro de un form):
<select name="combo1" onchange="salto(this.options[this.selectedIndex].value)">
Esto hará que salte automáticamente, luego de seleccionado cualquier item del primer combo, recargándose el mismo archivo (como lo especifica el <form action=...> y tomas la variable combo1 para listar los items en el segundo combo.
Cualquier consulta no dudes en escribir.
Atentamente
Julián Ruesjas
Argentina
Respuesta de luislili
1
Si no se ha introducido nada (se acaba de llegar a la página), el combo 1 y el 2 están vacíos.
Una vez rellenado el primero, lo que tiene que hacer es llamar a la misma página, pero actualizando solo el combo 2, ya que el primero lo tenemos de antes.
Una vez rellenado el primero, lo que tiene que hacer es llamar a la misma página, pero actualizando solo el combo 2, ya que el primero lo tenemos de antes.
Respuesta de virmix
1
Para esto tienes que hacer un ASP que se haga consultas a si mismo, es decir, tienes que usar un formulario independiente y que cada uno tenga un campo oculto tipo INPUT HIDDEN, lo que tendrá que hacer la página es lo siguiente:
- Llenar la lista del combo1
- El usuarios elije un dato de ls lista
- La página se regarga usando el VALUE de la selección para añadir al combo2 el nuevo lista
NOTA: Como hacer eso, simplemente en vez de poner en el segndo SELECT una cosa concreta cambialo por Request. Form("combo1")
- Llenar la lista del combo1
- El usuarios elije un dato de ls lista
- La página se regarga usando el VALUE de la selección para añadir al combo2 el nuevo lista
NOTA: Como hacer eso, simplemente en vez de poner en el segndo SELECT una cosa concreta cambialo por Request. Form("combo1")
Perdon,pero no tendras algun ejemplo por ahi??
Gracias
Gracias
No, tendría que acertelo y no es plan, con lo que te dije podrás hacerlo.
Te recomiendo que uses:
<%
If Request.Form.Count = 0 Then
%>
<% else %>
<% end if %>
Te recomiendo que uses:
<%
If Request.Form.Count = 0 Then
%>
<% else %>
<% end if %>
Respuesta de hommer
1
Es un poco largo de explicar, hay un artículo donde se explica como hacerlo:
http://www.aspfacil.com/codigo/listasdependientes.asp
http://www.aspfacil.com/codigo/listasdependientes.asp
Respuesta de williamduque
1
Es sencillo pero puede ser demoradito para el navegante.
Método 1. Manejar el evento "AlCambiar" en el combo de Departamento.
Método 2. Agregar un botoncito frente al combo de Departamento que diga "Ver municipios".
En ambos casos debe suceder:
1) El combo de Departamentos está una página y el resto en otra, de manera que al activar el combo de Departamentos o al hacer clic en el botón, se cargue la nueva página mostrando el combo de Municipios correspondientes.
2) Al cargar por primera vez, el combo de Municipios debe estar vacío o con una leyenda como "No ha seleccionado el Departamento".
3) El combo de Municipio es una consulta cuyo valor de Departamento ID llega desde el combo de Departamento.
Observación general. Esta solución es fácil pero puede complicar el uso de páginas dentro de páginas (o sea de frames). Para evitar esto se puede hacer que una sola página se llame a sí misma con datos nuevos y muestre los municipios correspondientes. También lo he hecho pero con páginas sencillas porque el tiempo de descarga puede ser terrible.
Me cuentas. William.
Método 1. Manejar el evento "AlCambiar" en el combo de Departamento.
Método 2. Agregar un botoncito frente al combo de Departamento que diga "Ver municipios".
En ambos casos debe suceder:
1) El combo de Departamentos está una página y el resto en otra, de manera que al activar el combo de Departamentos o al hacer clic en el botón, se cargue la nueva página mostrando el combo de Municipios correspondientes.
2) Al cargar por primera vez, el combo de Municipios debe estar vacío o con una leyenda como "No ha seleccionado el Departamento".
3) El combo de Municipio es una consulta cuyo valor de Departamento ID llega desde el combo de Departamento.
Observación general. Esta solución es fácil pero puede complicar el uso de páginas dentro de páginas (o sea de frames). Para evitar esto se puede hacer que una sola página se llame a sí misma con datos nuevos y muestre los municipios correspondientes. También lo he hecho pero con páginas sencillas porque el tiempo de descarga puede ser terrible.
Me cuentas. William.
Amigo, si no es mucha molestia, ¿no tendrás un ejemplo por ahí en donde salga más en cristiano lo que me explicaste arriba?
Muchas gracia perdón por la fregadera
Muchas gracia perdón por la fregadera
No te preocupes. No tengo un ejemplo, pero te construyo uno y te lo mando, no sé cómo enviar archivos adjuntos por este sitio, entonces, escríbee a mi correo ([email protected]) y te envío lo me pides, claro que no ya mismo, porque estoy muy ocupado.
Todo se puede arreglar, y si es tan fregado, pues se cambia y se hace fácil.
William.
Todo se puede arreglar, y si es tan fregado, pues se cambia y se hace fácil.
William.
Respuesta de hole
1
Si la tabla que se actualiza dependiendo de la otra tiene unos valores fijos o sea que no tiran de una base de datos lo que tienes que hacer es asociarle un evente onSelect una función que dependiendo del valor del primer combo por ej: si has asociado la propiedad value de cada opción al id(tabla), la función seria un switch que dependiendo del valor escriba en el 2º combo una serie de valores u otros, con document. form.combox.options.value para poner el valor de la opcion y lo mismo acabado en .text para la propia opción. Espero haberte ayudado si necesitas más no dudes en volver a preguntar para contestar de manera más especifica...