Foros del Web - Ver Mensaje Individual - como hacer un select multiple de paises ...

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