como hacer un select multiple de paises ...

Gaby_Corr · #1 (**permalink**) 10/08/2007, 09:38

que tal, ando buscando como hacer que un select multiple tenga los paises luego que al seleccionarlo me active en otro select multiple los estados de ese pais y asi sucesivamente.. hace mucho habia utilizado algo de esopero perdi mis archivos

una ayudadita por favor =)

Tigervlc · #2 (**permalink**) 10/08/2007, 15:15

Hola, he estado haciendo un ejemplo de lo que pides, usando la API DOM para javascript, aunque también podría hacerse programando el formulario con javascript de forma tradicional, o leyendo los datos desde XML usando p.ej PHP y las API's DOM o SAX de XML para PHP. De hecho, con XML sería mucho más cómodo, y seguro que puedes conseguir documentos XML con los datos completos de países y sus correspondientes estados, provincias, etc).

El problema de mi solución es que funciona perfectamente en Firefox, pero no en IE7

. No tengo ni idea de por qué. Alguien sabría decirme por qué? Si alguien supiera decírmelo se lo agradecería mucho.

El código es este:

Código HTML:

<html>
<head>
<title>Selects dinamicos</title>
</head>

<body onload="poblar(0)">
<script type="text/javascript">
pais1 = new Array('Madrid', 'Catalunya', 'Aragón', 'Comunidad Valenciana', 'Asturias')
pais2 = new Array('California', 'New York', 'Florida', 'Texas', 'Ohio')
paises = new Array(pais1, pais2)

function poblar(indicePais) {	
	//	Obtener referencia a formulario
	miForm = document.getElementById('miForm')
	
	//	En caso de haber ya un select estado, borrarlo para crear el nuevo
	if (estado = document.getElementById('estado')) {	
		miForm.removeChild(estado)
	} 
	
	// Crear el nuevo select para el estado/provincia
	estado = document.createElement('select')
	estado.setAttribute('id', 'estado')
	estado.setAttribute('name', 'estado')
	miForm.appendChild(estado)
	
	//	poblar el select estado con las opciones que toquen (estados, provincias, etc)
	for (var i = 0; i < paises[indicePais].length; i++) {
		opcion = document.createElement('option')
		texto = document.createTextNode(paises[indicePais][i])
		opcion.appendChild(texto)
		estado.appendChild(opcion)
	}
}

// Función llamada por el manejador de eventos onchange del select pais. Se invoca cada vez que se cambia la opción
function cambiar(seleccion) {
	var opcionElegida = seleccion.selectedIndex
	poblar(opcionElegida)
}
</script>

<form action="" method="get" name="miForm" id="miForm">
  <label>
  <select name="pais" id="pais" onchange="cambiar(this)">
    <option selected="selected">España</option>
    <option>Estados Unidos</option>
  </select>
  </label>
</form>
</body>
</html>

El error que me da IE7 está en la primera línea de la función poblar():
miForm = document.getElementById('miForm')
Error: El objeto no acepta esta propiedad o método.

Shade · #3 (**permalink**) 13/08/2007, 09:15

Código:

<html>
<head>
<title>Selects dinamicos</title>
</head>

<body onload="poblar(0)">
<script type="text/javascript">
var pais1 = new Array('Madrid', 'Catalunya', 'Aragón', 'Comunidad Valenciana', 'Asturias')
var pais2 = new Array('California', 'New York', 'Florida', 'Texas', 'Ohio')
var paises = new Array(pais1, pais2)

function poblar(indicePais) {	
	//	Obtener referencia a formulario
	var miForm = document.getElementById('miForm')
	
	//	En caso de haber ya un select estado, borrarlo para crear el nuevo
	if (estado = document.getElementById('estado')) {	
		miForm.removeChild(estado)
	} 
	
	// Crear el nuevo select para el estado/provincia
	var estado = document.createElement('select')
	estado.setAttribute('id', 'estado')
	estado.setAttribute('name', 'estado')
	miForm.appendChild(estado)
	
	//	poblar el select estado con las opciones que toquen (estados, provincias, etc)
	for (var i = 0; i < paises[indicePais].length; i++) {
		var opcion = document.createElement('option')
		var texto = document.createTextNode(paises[indicePais][i])
		opcion.appendChild(texto)
		estado.appendChild(opcion)
	}
}

// Función llamada por el manejador de eventos onchange del select pais. Se invoca cada vez que se cambia la opción
function cambiar(seleccion) {
	var opcionElegida = seleccion.selectedIndex
	poblar(opcionElegida)
}
</script>

<form action="" method="get" name="miForm" id="miForm">
  <label>
  <select name="pais" id="pais" onchange="cambiar(this)">
    <option selected="selected">España</option>
    <option>Estados Unidos</option>
  </select>
  </label>
</form>
</body>
</html>

Definir las variables con el var xxxx =

IE7 sux

Atomycko · #4 (**permalink**) 13/08/2007, 10:44

Saludos Gaby_Corr!!

Espero esto te funcione, en el ejemplo se muestran los Estados de Canada y Chile:

Código:

<html>
<head>
<script language="JavaScript">
var arrDynaList = new Array();
var arrDL1 = new Array();
arrDL1[1] = "pais"; ///EL NOMBRE DEL SELECT DE LOS PAISES
arrDL1[2] = "form1";///EL NOMBRE DEL FORMULARIO
arrDL1[3] = "estado";///EL NOMBRE DEL SELECT QUE MOSTRARA LOS ESTADOS
arrDL1[4] = "form1";///DE NUEVO EL NOMBRE DEL FORMULARIO
arrDL1[5] = arrDynaList;

arrDynaList[0] = "can" , arrDynaList[1] = "Alberta" , arrDynaList[2] = "01" 
arrDynaList[3] = "can" , arrDynaList[4] = "British Columbia" , arrDynaList[5] = "02" 
arrDynaList[6] = "can" , arrDynaList[7] = "Manitoba" , arrDynaList[8] = "03" 
arrDynaList[9] = "can" , arrDynaList[10] = "New Brunswick" , arrDynaList[11] = "04" 
arrDynaList[12] = "can" , arrDynaList[13] = "Newfoundland" , arrDynaList[14] = "05" 
arrDynaList[15] = "can" , arrDynaList[16] = "Northwest Territories" , arrDynaList[17] = "06" 
arrDynaList[18] = "can" , arrDynaList[19] = "Nova Scotia" , arrDynaList[20] = "07" 
arrDynaList[21] = "can" , arrDynaList[22] = "Nunavut" , arrDynaList[23] = "08" 
arrDynaList[24] = "can" , arrDynaList[25] = "Ontario" , arrDynaList[26] = "09" 
arrDynaList[27] = "can" , arrDynaList[28] = "Prince Edward" , arrDynaList[29] = "10" 
arrDynaList[30] = "can" , arrDynaList[31] = "Quebec" , arrDynaList[32] = "11" 
arrDynaList[33] = "can" , arrDynaList[34] = "Saskatchewan" , arrDynaList[35] = "12" 
arrDynaList[36] = "can" , arrDynaList[37] = "Yukon" , arrDynaList[38] = "13" 

arrDynaList[39] = "chi" , arrDynaList[40] = "Aisén del General Carlos Ibáñez del Campo" , arrDynaList[41] = "14" 
arrDynaList[42] = "chi" , arrDynaList[43] = "Antofagasta" , arrDynaList[44] = "15" 
arrDynaList[45] = "chi" , arrDynaList[46] = "Atacama" , arrDynaList[47] = "16" 
arrDynaList[48] = "chi" , arrDynaList[49] = "Biobío" , arrDynaList[50] = "17" 
arrDynaList[51] = "chi" , arrDynaList[52] = "Coquimbo" , arrDynaList[53] = "18" 
arrDynaList[54] = "chi" , arrDynaList[55] = "La Araucanía" , arrDynaList[56] = "19" 
arrDynaList[57] = "chi" , arrDynaList[58] = "Libertador" , arrDynaList[59] = "20" 
arrDynaList[60] = "chi" , arrDynaList[61] = "Los Lagos" , arrDynaList[62] = "21" 
arrDynaList[63] = "chi" , arrDynaList[64] = "Magallanes" , arrDynaList[65] = "22" 
arrDynaList[66] = "chi" , arrDynaList[67] = "Maule" , arrDynaList[68] = "23" 
arrDynaList[69] = "chi" , arrDynaList[70] = "Santiago De Chile" , arrDynaList[71] = "24" 
arrDynaList[72] = "chi" , arrDynaList[73] = "Tarapacá" , arrDynaList[74] = "25" 
arrDynaList[75] = "chi" , arrDynaList[76] = "Valparaíso" , arrDynaList[77] = "26" 

function setDynaList(arrDL){
 var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];
 var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];

 var arrList = arrDL[5];
 clearDynaList(oList2);
 if (oList1.selectedIndex == -1){
  oList1.selectedIndex = 0;
 }
 populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);
 return true;
}
function clearDynaList(oList){
 for (var i = oList.options.length; i >= 0; i--){
  oList.options[i] = null;
 }
 oList.selectedIndex = -1;
}
function populateDynaList(oList, nIndex, aArray){
 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
 }
 oList.selectedIndex = 0;
}
</script>
<body>
<form name="form1" action="" method="post">
<select name="pais" onChange="setDynaList(arrDL1)">
  <option value="">» Selecciona «</option>
  <option value="can">Canada</option>
  <option value="chi">Chile</option>
</select>
<select name="estado">
  <option value=""></option>
</select>
</form>
</body></html>

Traduccion (ejemplo de la primera linea de inicio de los array):

arrDynaList[T1] = "T2" , arrDynaList[T1] = "T3" , arrDynaList[T1] = "T4"

T1 = Numero de entradas (array)
T2 = Valor del "option" del "select" Pais ejem: <option value=can>CANADA</option>
T3 = Nombre del Estado del Pais
T4 = Valor del "option" del "select" Estado

Tigervlc · #5 (**permalink**) 13/08/2007, 16:18

Cita:

Iniciado por Shade

Definir las variables con el var xxxx =

IE7 sux

Vaya es verdad!

Declarando todas las variables con var también va en IE7. Gracias por la ayuda Shade.

Entonces para que un script funcione bien en IE7 se han de definir TODAS las variables con var? Así no se podrá diferenciar entre variables locales y globales no?

Otra razón más para abandonar el Explorer.

tunait · #6 (**permalink**) 14/08/2007, 03:38

Cita:

Iniciado por Tigervlc

se han de definir TODAS las variables con var? Así no se podrá diferenciar entre variables locales y globales no?

Bueno, no exactamente. Una variable definida fuera de una función es global, tanto si lleva como si no se declara con var.

Una variable declarada sin var dentro de una función será local si no existe una global con el mismo nombre. Si existe una global cualquier cambio a la variable dentro de la función afectará a la variable global. Si queremos una variable local que use el mismo nombre que una global y manejarlas como distintas variables se declara la que está dentro de la función usando var. De esa forma será local y no alterará la global.

Código:

var nombre='paco';

function pepe(){
     nombre = 'pepe';
}
// la variable global valdrá pepe después de ejecutar la función

Código:

var nombre='paco';

function pepe(){
     var nombre = 'pepe';
}
//la variable global seguirá valiendo paco después de ejecutar la función

Si una variable se declara sin var dentro de una función y no existe una global declarada con el mismo nombre la variable será local.

Un saludo

Tigervlc · #7 (**permalink**) 14/08/2007, 08:05

Ya, eso lo sabía, pero por eso me extraña que para que funcionase mi anterior script en IE7 se tuviera que declarar TODAS las variables con var como ha dicho Shade. En ese caso, si se quiere usar una variable global dentro de una función, no se podrá. Si ha de ser así, se trata de una inconsistencia de IE7.

tunait · #8 (**permalink**) 14/08/2007, 10:27

No es que sea necesario declarar todas las variables con var para IE7. El script tampoco funciona en IE6. De hecho tampoco lo hace en FF corrigiendo una línea que está asignando en vez de comparando en un condicional.

El asunto se arregla anteponiendo la sentencia var como te ha sugerido Shade porque con eso se convierte miForm en una variable local.
Estás usando por nombre de variable el mismos nombre que estás asignando al formulario. Para IE miForm es el formulario. Al anteponer la sentencia var delante de miForm guardas el formulario dentro de miForm como variable local y no sobre-escribe lo que IE entiende como variable global miForm (el propio formulario)

Si cambias el name e id del formulario dejará de darte ese error.

Otro detalle es que estás asignando en vez de comparando en esta línea

Código:

if(estado = document.getElementById('estado'))

Al corregirlo deja de funcionar en FF al iniciar el script en el evento onload. estado aún no existe. Una vez cambiado el id y name del formulario IE también pierde agua por el mismo sitio

Tigervlc · #9 (**permalink**) 15/08/2007, 02:46

Cita:

Iniciado por tunait

Otro detalle es que estás asignando en vez de comparando en esta línea

Código:

if(estado = document.getElementById('estado'))

Bueno, era consciente de que lo que hay en la condición del if es una asignación en vez de una comparación. Esto es una acción permitida que yo sepa, al menos en algunos lenguajes. En ese if, lo primero que se hace es la asignación a la variable estado, y seguidamente, se valora el valor de dicha asignación a true o false. Si estado recibe un valor, se evalúa a true, y si fuera 0, "0", undefined o null se evaluaría a false. Esa línea equivaldría a hacer:

estado = document.getElementById('estado')
if (estado) ...

(además, como ahora declaro estado con var ya no machaco el valor del select en IE)

En cuanto a lo de var, ya me lo has aclarado, muchas gracias.

Intentaré a partir de ahora usar nombres diferentes para variables y elementos de formulario

Angela59 · #10 (**permalink**) 06/05/2011, 10:20

Aqui hay justo lo que necesitas,espero que no sea demasiado tarde,no se,acabo de llegar xD
http://www.elcodigo.com/cgi-bin/DBread.cgi?tabla=scripts&campo=0&clave=114&info=4