Javascript

Hola Experto, todo la siguiente consulta
Encontré el siguiente html que usa un java script para combinar list/menu, lo que quisiera hacer es como puedo poner el script de java script en un archivo saparado, lo intente pero como llama a unos text box del html no carga la información cuando lo separo y yo realmente no se nada de javascript, gracias por la ayuda, aquí esta el código
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>SELECTs depedientes con inteligencia hacia atrás</title>
</head>
<body>
<form name="m" method="post" action="procesa.php">
<table width="409" cellspacing="0" cellpadding="0" border="0">
<tr><td height="5"></td></tr>
<tr>
<td width="189"><font class="registro">Departamento</font></td>
<td width="220">
<select name="departamento" id="depa" style="width:220px;height:18px;font-size:12px;font-family:Arial, Tahoma, Helvetica;font-weight:normal;color:000000;border-width:1;border-style:solid;border-color:CCCDCF">
</select>
</td>
</tr>
<tr><td height="5"></td></tr>
<tr>
<td width="189"><font class="registro">Provincia</font></td>
<td width="220">
<select name="provincia" id="provi" style="width:220px;height:18px;font-size:12px;font-family:Arial, Tahoma, Helvetica;font-weight:normal;color:000000;border-width:1;border-style:solid;border-color:CCCDCF">
</select>
</td>
</tr>
<tr><td height="5"></td></tr>
<tr>
<td width="189"><font class="registro">Distrito</font></td>
<td width="220">
<select name="distrito" id="ciud" style="width:220px;height:18px;font-size:12px;font-family:Arial, Tahoma, Helvetica;font-weight:normal;color:000000;border-width:1;border-style:solid;border-color:CCCDCF">
</select>
</td>
</tr>
<tr>
<td colspan="2"> <input type="button" value="restablecer" onClick="reiniciar_selects(true,true,true)" /> </td>
</tr>
</table>
</form>
<script>
/****************************************************************
ESTRUCTURA BÁSICA
****************************************************************/
var paises=["PAIS1","PAIS2","PAIS3"];
var provincias=[
["PROVINCIA1 (p1)","PROVINCIA2 (p1)", "PROVINCIA3 (p1)", "PROVINCIA4 (p1)"],
["PROVINCIA1 (p2)", "PROVINCIA2 (p2)", "PROVINCIA3 (p2)", "PROVINCIA4 (p2)", "PROVINCIA5 (p2)", "PROVINCIA6 (p2)"],
["PROVINCIA1 (p3)", "PROVINCIA2 (p3)", "PROVINCIA3 (p3)" ]
];
var ciudades=[
[
["ciud1-1-1", "ciud1-1-2", "ciud1-1-3", "ciud1-1-4", "ciud1-1-5" ],
["ciud1-2-1", "ciud1-2-2", "ciud1-2-3", "ciud1-2-4" ],
["ciud1-3-1", "ciud1-3-2", "ciud1-3-3", "ciud1-3-4" ],
["ciud1-4-1", "ciud1-4-2", "ciud1-4-3" ]
],
[
["ciud2-1-1", "ciud2-1-2", "ciud2-1-3", "ciud2-1-4", "ciud2-1-5", "ciud2-1-6", "ciud2-1-7", "ciud2-1-8" ],
["ciud2-2-1", "ciud2-2-2", "ciud2-2-3", "ciud2-2-4", "ciud2-2-5", "ciud2-2-6" ],
["ciud2-3-1", "ciud2-3-2", "ciud2-3-3", "ciud2-3-4", "ciud2-3-5", "ciud2-3-6" ],
["ciud2-4-1", "ciud2-4-2", "ciud2-4-3", "ciud2-4-4", "ciud2-4-5", "ciud2-4-6", "ciud2-4-7" ],
["ciud2-5-1", "ciud2-5-2", "ciud2-5-3", "ciud2-5-4", "ciud2-5-5" ],
["ciud2-6-1", "ciud2-6-2", "ciud2-6-3", "ciud2-6-4", "ciud2-6-5" ]
],
[
["ciud3-1-1", "ciud3-1-2", "ciud3-1-3", "ciud3-1-4", "ciud3-1-5", "ciud3-1-6", "ciud3-1-7", "ciud3-1-8" ],
["ciud3-2-1", "ciud3-2-2", "ciud3-2-3" ],
["ciud3-3-1", "ciud3-3-2", "ciud3-3-3", "ciud3-3-4" ]
]
];
/****************************************************************
FUNCIONES ÚTILES PARA ARRAYS Y SELECTS
****************************************************************/
//agrega un option a un select, con un par de atributos extra que nos serán útiles
function agregarOpt(elSel,txt,valor,suPais,suProvincia,contieneProvincias,contieneCiudades) {
var indice=elSel.options.length;
elSel.options[ indice ] = new Option(txt,valor);
elSel.options[ indice ].suPais=suPais;
elSel.options[ indice ].suProvincia=suProvincia;
elSel.options[ indice ].contieneProvincias=contieneProvincias;
elSel.options[ indice ].contieneCiudades=contieneCiudades;
}
//selecciona la opción iPos en el select elSelect
function selecciona(elSelect,iPos) {
elSelect.options[iPos].selected="selected"; // para los estándares
elSelect.options.selectedIndex=iPos; // a la manera IE
}
//devuelve true si el elemento elem se encuentra entre los elementos del array
Array.prototype.existe=function(elem) {
for(var i=0;i<this.length;i++)
if( this == elem ) return true;
return false;
}
//borra todas las opciones de un select cuyo valor no se encuentre entre los elementos de elArray
function dejarOpcionesExistentes(elSelect,elArray) {
for(var i=0; i<elSelect.options.length; i++) {
if( !elArray.existe( elSelect.options.value ) ) {
//borramos la opcion
elSelect.options=null;
i--; //Reducimos i porque tenemos que iterar más veces (el length de las options es uno menos)
}
}
}
/****************************************************************
CREACIÓN Y RELLENADO DE LOS SELECTS
****************************************************************/
//referenciamos los SELECTS
var selPais=document.getElementById("depa");
var selProv=document.getElementById("provi");
var selCiud=document.getElementById("ciud");
//la función coloca en los selects creados todos los valores de los arrays, pudiendo salvar el select que se indique en los argumentos
function reiniciar_selects(conPaises,conProvincias,ConCiudades) {
if (conPaises==undefined || conPaises)
...

1 respuesta

Respuesta
1
Lo que hay entre
<script> y </script>
Lo tienes que copiar en un archivo de texto y llamarlo por ejemplo "listmenu.js"
Lo dejas en el mismo directorio donde esté el archivo html.
Dentro del html añades
<script src="listmenu.js"></script>
Entre
</title> y </head>
Hola experto y gracias por la respuesta
Eso fue lo que hice pero no me cargo la información en los combobox por eso pensé que había hecho algo mal.
¿Tendría qué hacer algo más?
Saludos,
¿Te funciona con el javascript dentro del html y no te funciona cuando lo pones en un archivo js externo?
¿Qué navegador utilizas? Comprueba si el navegador te devuelve un mensaje de error.
Te aconsejo que utilices FireFox y mejor con Firebug instalado.
Si no te funciona, enviame el archivo html y js a [email protected]
Hola Experto...
Si correcto, me funciona con el js en el html pero no cuando lo pongo afuera y yo uso el Firefox, te voy a mandar el archivo par aque lo veas, muchas gracias por tu ayuda, te va a llegar a nombre de Joseph Marquez
OK, ya se por que no te funciona.
El problema está en estas líneas:
//referenciamos los SELECTS
var selPais=document.getElementById("depa");
var selProv=document.getElementById("provi");
var selCiud=document.getElementById("ciud");
Cuando se ejecutan estas instrucciones todavía no existe "depa", "provi" ni "ciud".
Deberías de meterlas en una función y asegurarte que se ejecuten cuando esté toda la página cargada con el evento "onload".
Algo así:
window.onload=function(){
//Esto se ejecuta cuando la página está completamente cargada.
inicializar();
}
//Declaro las variables para que sean glovales.
var selPais;
var selProv;
var selCiud;
function inicializar(){
//referenciamos los SELECTS
selPais=document.getElementById("depa");
selProv=document.getElementById("provi");
selCiud=document.getElementById("ciud");
}
Hola Experto, entonces seria copiar esta parte
//Declaro las variables para que sean glovales.
var selPais;
var selProv;
var selCiud;
function inicializar(){
//referenciamos los SELECTS
selPais=document.getElementById("depa");
selProv=document.getElementById("provi");
selCiud=document.getElementById("ciud");
}
en ves de esto otro
//referenciamos los SELECTS
var selPais=document.getElementById("depa");
var selProv=document.getElementById("provi");
var selCiud=document.getElementById("ciud");
...... y esto donde lo pongo ?
window.onload=function(){
//Esto se ejecuta cuando la página está completamente cargada.
inicializar();
}
Saludos, y gracias
En el archivo .js
No importa mucho su intentar pero normalmente se pone al principio.
Hola Experto, ya lo hice pero no me cargo los combo, te envíe el archivo para que lo veas y gracias por la a yuda
Saludos,
Tienes que mover la instrucción
Reiniciar_selects(true, true, true); //todos los valores en todos los selects
Dentro de inicializar. Justo detrás de
selCiud=document.getElementById("ciud");
La idea es que toda instrucción javascript esté dentro de alguna función y evitar en lo posible que esté suelta por el fichero .js a excepción de las declaraciones de las variables globales.
Hola Experto, hice lo que me dijiste pero no me cargar los combos, mira
/****************************************************************
ESTRUCTURA BÁSICA
****************************************************************/
var paises=["San Jose","Alajuela","Cartago"];
var provincias=[
["San Jose-1","Escazu-2", "Desamparados-3", "Puriscal-4", "Tarrazu-5", "Aserri-6", "Mora-7", "Goicoechea-8", "Santa Ana-9", "Alajuelita-10", "Vazquez de Coronado-11", "Acosta-12", "Tibas-13", "Moravia-14", "Montes de Oca-15", "Turrubares-16", "Dota-17", "Curridabat-18", "Perez Zeledon-19", "Leon Cortes-20" ],
["Alajuela", "San Ramon", "Grecia", "San Mateo ", "Atenas", "Naranjo ", "Palmares", "Poas", "Orotina", "San Carlos", "Alfaro Ruiz", "Valverde Vega", "Upala", "Los Chiles", "Guatuso" ],
["Cartago ", "Paraiso", "La Union", "Jimenez", "Turrialba ", "Alvarado", "Oreamuno", "El Guarco" ]
];
var ciudades=[
[
["El Carmen","Merced","Hospital","Catedral","Zapote","San Francisco de Dos Rios","Uruca","Mata Redonda","Pavas","Hatillo","San Sebastian" ],
["Escazu","San Antonio","San Rafael" ],
["Desamparados","San Miguel","San Juan de Dios","San Rafael Arriba","San Antonio","Frailes","Patarra","San Cristobal","Rosario","Damas","San Rafael Abajo","Gravilias","Los Guido" ],
["Santiago", "Mercedes Sur", "Barbacoas", "Grifo Alto", "San Rafael", "Candelarita", "Desamparaditos", "San Antonio", "Chires" ],
["San Marcos","San Lorenzo","San Carlos" ],
["Aserri", "Tarbaca", "Vuelta de Jorco", "San Gabriel", "Legua", "Monterrey", "Salitrillos" ],
["Colon", "Guayabo", "Tabarcia", "Piedras Negras", "Picagres" ],
["Guadalupe", "San Francisco", "Calle Blancos", "Mata de Platano", "Ipis", "Rancho Redondo", "Purral" ],
["Santa Ana", "Salitral", "Pozos", "Uruca", "Piedades", "Brasil" ],
["Alajuelita", "San Josecito", "San Antonio", "Concepción", "San Felipe" ],
["San Isidro", "San Rafael", "Dulce Nombre de Jesús", "Patalillo", "Cascajal" ],
["San Ignacio", "Guaitil", "Palmichal", "Cangrejal", "Sabanillas" ],
["San Juan", "Cinco Esquinas", "Anselmo Llorente", "León XIII", "Colima" ],
["San Vicente", "San Jeronimo", "Trinidad" ],
["San Pedro", "Sabanilla", "Mercedes", "San Rafael" ],
["San Pablo", "San Pedro", "San Juan de Mata", "San Luis", "Carara" ],
["Santa Maria", "Jardin", "Copey" ],
["Curridabat", "Granadilla", "Sánchez", "Tirrases" ],
["San Isidro del General" ,"General", "Daniel Flores", "Rivas", "San Pedro", "Platanares", "Pejibaye", "Cajon", "Baru", "Rio Nuevo", "Paramo" ],
["San Isidro", "Santa Cruz" ]
],
[
["Alajuela", "San José", "Carrizal", "San Antonio", "Guácima", "San Isidro", "Sabanilla", "San Rafael", "Río Segundo", "Desamparados", "Turrúcares", "Tambor", "Garita", "Sarapiquí" ],
["San Ramón", "Santiago", "San Juan", "Piedades Norte", "Piedades Sur", "San Rafael", "San Isidro", "Ángeles", "Álfaro", "Volio", "Concepción", "Zapotal", "Peñas Blancas" ],
["Grecia", "San Isidro", "San José", "San Roque", "Tacares", "Río Cuarto", "Puente de Piedra", "Bolívar" ],
["San Mateo", "Desmonte", "Jesús María" ],
["Atenas", "Jesús", "Mercedes", "San Isidro", "Concepción", "San José", "Santa Eulalia", "Escobal" ],
["Naranjo", "San Miguel", "San José", "Cirrí Sur", "San Jerónimo", "San Juan", "Rosario" ],
["Palmares", "Zaragoza", "Buenos Aires", "Santiago", "Candelaria", "Esquipulas", "La Granja" ],
["San Pedro", "San Juan", "San Rafael", "Carrillos", "Sabana Redonda" ],
["Orotina", "Mastate", "Hacienda Vieja", "Coyolar", "Ceiba" ],
["Quesada", "Florencia", "Buenavista", "Aguas Zarcas", "Venecia", "Pital", "Fortuna", "Tigra", "Palmera", "Venado", "Cutris", "Monterrey", "Pocosol" ],
["Zarcero", "Laguna", "Tapezco", "Guadalupe", "Palmira", "Zapote", "Brisas" ],
["Sarchi Norte", "Sarchi Sur", "Toro Amarillo", "San Pedro", "Rodriguez" ],
["Upala", "Aguas Claras", "San Jose (Pizote)", "Bijagua", "Delicias", "Dos Rios", "Yolillal" ],
["Los Chiles", "Caño Negro", "El Amparo", "San Jorge" ],
["San Rafael", "Buenavista", "Cote" ]
],
[
["Oriental", "Occidental", "Carmen", "San Nicolás", "Aguacaliente (San Francisco)", "Guadalupe (Arenilla)", "Corralillo", "Tierra Blanca", "Dulce Nombre", "Llano Grande", "Quebradilla" ],
["Paraíso", "Santiago", "Orosi", "Cachí", "Llanos de Santa Lucía" ],
["Tres Ríos", "San Diego", "San Juan", "San Rafael", "Concepción", "Dulce Nombre", "San Ramón", "Río Azul" ],
["Juan Viñas", "Tucurrique", "Pejibaye" ],
["Turrialba", "La Suiza", "Peralta", "Santa Cruz", "Santa Teresita", "Pavones", "Tuis", "Tayutic", "Santa Rosa", "Tres Equis", "La Isabel", "Chirripó" ],
["Pacayas", "Cervantes", "Capellades" ],
["San Rafael", "Cot", "Potrero Cerrado", "Cipreses", "Santa Rosa" ],
["Tejar", "San Isidro", "Tobosi", "Patio de Agua" ]
]
];
/****************************************************************
FUNCIONES ÚTILES PARA ARRAYS Y SELECTS
****************************************************************/
//agrega un option a un select, con un par de atributos extra que nos serán útiles
function agregarOpt(elSel,txt,valor,suPais,suProvincia,contieneProvincias,contieneCiudades) {
var indice=elSel.options.length;
elSel.options[ indice ] = new Option(txt,valor);
elSel.options[ indice ].suPais=suPais;
elSel.options[ indice ].suProvincia=suProvincia;
elSel.options[ indice ].contieneProvincias=contieneProvincias;
elSel.options[ indice ].contieneCiudades=contieneCiudades;
}
//selecciona la opción iPos en el select elSelect
function selecciona(elSelect,iPos) {
elSelect.options[iPos].selected="selected"; // para los estándares
elSelect.options.selectedIndex=iPos; // a la manera IE
}
//devuelve true si el elemento elem se encuentra entre los elementos del array
Array.prototype.existe=function(elem) {
for(var i=0;i<this.length;i++)
if( this == elem ) return true;
return false;
}
//borra todas las opciones de un select cuyo valor no se encuentre entre los elementos de elArray
function dejarOpcionesExistentes(elSelect,elArray) {
for(var i=0; i<elSelect.options.length; i++) {
if( !elArray.existe( elSelect.options.value ) ) {
//borramos la opcion
elSelect.options=null;
i--; //Reducimos i porque tenemos que iterar más veces (el length de las options es uno menos)
}
}
}
window.onload=function(){
//Esto se ejecuta cuando la página está completamente cargada.
inicializar();
}
/****************************************************************
CREACIÓN Y RELLENADO DE LOS SELECTS
****************************************************************/
//Declaro las variables para que sean glovales.
var selPais;
var selProv;
var selCiud;
function inicializar(){
//referenciamos los SELECTS
reiniciar_selects(true,true,true); //todos los valores en todos los selects
selPais=document.getElementById("depa");
selProv=document.getElementById("provi");
selCiud=document.getElementById("ciud");
reiniciar_selects(true,true,true); //todos los valores en todos los selects
}
//la función coloca en los selects creados todos los valores de los arrays, pudiendo salvar el select que se indique en los argumentos
function reiniciar_selects(conPaises,conProvincias,ConCiudades) {
if (conPaises==undefined || conPaises)
haCambiadoPais=false;
//eliminamos las option de los selects que procedan
while( (conPaises==undefined || conPaises) && selPais.options.length>0 )
selPais.options[0]=null;
while( (conProvincias==undefined || conProvincias) && selProv.options.length>0 )
selProv.options[0]=null;
while( (ConCiudades==undefined || ConCiudades) && selCiud.options.length>0 )
selCiud.options[0]=null;
//colocamos las opciones nuevas si procede
for(var i=0; i<paises.length; i++) {
if(conPaises==undefined || conPaises )
agregarOpt(selPais, paises, paises, null, null, provincias.toString().split(","), ciudades.toString().split(",") );
for(var j=0; j<provincias.length; j++) {
if(conProvincias==undefined || conProvincias )
agregarOpt(selProv, provincias[j], provincias[j], i, null, null, ciudades[j].toString().split(",") );
for(k=0; k<ciudades[j].length; k++) {
if(ConCiudades==undefined || ConCiudades ) {
//Cuenta regresiva para contar todas las provincias anteriores (cuantas provincias había en los países anteriores)
var aux=i-1, provinciasAnteriores=0;
while(aux>=0)
provinciasAnteriores+=provincias[aux--].length;
agregarOpt(selCiud, ciudades[j][k], ciudades[j][k], i, provinciasAnteriores+";"+j, null, null);
}
}
}
}
}
var haCambiadoPais=false; //elemento de control para contar las provincias al cambiar de ciudad
/****************************************************************
EVENTOS ONCHANGE PARA CADA UNO DE LOS SELECTS
****************************************************************/
selPais.onchange=function() {
//restablecemos provincias, ciudades
reiniciar_selects(false,true,true);
//cambiar provincias para que sólo contengan .contieneProvincias
var contieneProvincias=this.options[this.options.selectedIndex].contieneProvincias;
dejarOpcionesExistentes(selProv,contieneProvincias);
//cambiar ciudades para que sólo contengan .contieneCiudades
var contieneCiudades=this.options[this.options.selectedIndex].contieneCiudades;
dejarOpcionesExistentes(selCiud,contieneCiudades);
haCambiadoPais=true;
}
selProv.onchange=function() {
//restablecemos sólo ciudades
reiniciar_selects(false,false,true);
//seleccionar el pais al que pertenece la provincia
var suPais=this.options[this.options.selectedIndex].suPais;
selecciona(selPais,suPais);
//cambiar ciudades para que sólo contengan .contieneCiudades
var contieneCiudades=this.options[this.options.selectedIndex].contieneCiudades;
dejarOpcionesExistentes(selCiud,contieneCiudades);
}
selCiud.onchange=function() {
//seleccionar el pais al que pertenece la ciudad
var suPais=this.options[this.options.selectedIndex].suPais;
selecciona(selPais,suPais);
//seleccionar la provincia a la que pertenece la ciudad
var suProvincia=this.options[this.options.selectedIndex].suProvincia;
if(!haCambiadoPais) suProvincia=eval( suProvincia.replace(";","+") ); //suma de las provincias de los anteriores paises más la suya
else suProvincia=suProvincia.split(";")[1]; //sólo la suya
selecciona(selProv,suProvincia);
}
Ok, sólo falta borrar la instrucción
Reiniciar_selects(true, true, true); //todos los valores en todos los selects
De donde estaba antes.
var haCambiadoPais=false; //elemento de control para contar las provincias al cambiar de ciudad
Reiniciar_selects(true, true, true); //todos los valores en todos los selects <--Eliminar
/****************************************************************
EVENTOS ONCHANGE PARA CADA UNO DE LOS SELECTS
****************************************************************/

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas