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)
...
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 de abelrincon
1