Hacer que la función pueda ser utilizada para otros select

lyoung · #1 (**permalink**) 13/01/2010, 04:57

Me bajé la siguiente función:

Código Javascript:

Ver originalfunction cambia_avisos(i){
    //tomo el valor del select del pais elegido
    var pais
    pais = document.f1.pais[document.f1.pais.selectedIndex].value
    //miro a ver si el pais está definido
    if (pais != 0) {
       //si estaba definido, entonces coloco las opciones de la provincia correspondiente.
       //selecciono el array de provincia adecuado
       mis_provincias=eval("provincias_" + pais)
       //calculo el numero de provincias
       num_provincias = mis_provincias.length
       //marco el número de provincias en el select
       document.f1.provincia.length = num_provincias
       //para cada provincia del array, la introduzco en el select
       for(i=0;i<num_provincias;i++){
          document.f1.provincia.options[i].value=mis_provincias[i]
          document.f1.provincia.options[i].text=mis_provincias[i]
       }
    }else{
       //si no había provincia seleccionada, elimino las provincias del select
       document.f1.provincia.length = 1
       //coloco un guión en la única opción que he dejado
       document.f1.provincia.options[0].value = "-"
       document.f1.provincia.options[0].text = "-"
    }
    //marco como seleccionada la opción primera de provincia
    document.f1.provincia.options[0].selected = true
} 
</script>

La misma hace que dado un select pais, al elegir una opción rellene el select provincia.

Lo que quisiera es la forma de poder tener varios select pais (podría ser pais1, pais2, etc) y que cada uno modifique el select provincia correspondiente (provincia1, provincia2, etc.)

Se me ocurría pasar un parametro, pero no se como modificar los nombres en la función de modo que tome como nombre del select una variable.

Desde ya, muchas gracias por la ayuda.

mhax · #2 (**permalink**) 13/01/2010, 07:23

Lo unico que se me viene a la mente ahora es tener una funcion que reciba el pais y el identificador del select provincia.
Ya teniendo ese identificador puedes diferenciar a cada select
puedes tener esta funcion:

Código Javascript:

Ver originalfunction Provincia(pais,id){ 
  .......
}

Saludos.

quimfv · #3 (**permalink**) 13/01/2010, 07:23

El identificador del select de provincia se forma por "pr"+el identificadors del select de pais correspondiente...

así pais1 prpais1

luego pasas el select pais como objeto a la funcion, llenaprovincia(this)

así tienes el valor, el texto y el identificador con un solo parametro, a este ultimo le agregas "pr"+obj.id y accedes al select de prov correspondiente...

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
//Array bidimensional de provincias
var provincias=new Array();
var pareja=new Array(2);
pareja[0]="PaisA";
pareja[1]="Provincia_1_PaisA";
provincias[0]=pareja;
pareja=new Array(2);
pareja[0]="PaisA";
pareja[1]="Provincia_2_PaisA";
provincias[1]=pareja;
pareja=new Array(2);
pareja[0]="PaisB";
pareja[1]="Provincia_1_PaisB";
provincias[2]=pareja;
pareja=new Array(2);
pareja[0]="PaisB";
pareja[1]="Provincia_2_PaisB";
provincias[3]=pareja;
pareja=new Array(2);
pareja[0]="PaisB";
pareja[1]="Provincia_3_PaisB";
provincias[4]=pareja;
 
function llenaProvincia(obj){
    var pais;
    pais = obj.value;
    delOptions(document.getElementById("pr"+obj.id));
    if (pais != "0") {
       addOpt(document.getElementById("pr"+obj.id), 0, "Elige provincia", "0");
       var j=1;
       for(i=0;i<provincias.length;i++){
            if(provincias[i][0]==obj.value){
                addOpt(document.getElementById("pr"+obj.id), j, provincias[i][1], provincias[i][1]);
                j++;
          }
       }
    }else{
                addOpt(document.getElementById("pr"+obj.id), 0, "Elige pais", "0");
    }
    //marco como seleccionada la opci&#243;n primera de provincia
    document.getElementById("pr"+obj.id).options[0].selected = true;
} 
 
function addOpt(oCntrl, iPos, sTxt, sVal){
    var selOpcion=new Option(sTxt, sVal);
    eval(oCntrl.options[iPos]=selOpcion);
}
 
function delOptions(oCntrl){
    while(oCntrl.length > 0) oCntrl.options[0]=null; 
}
</script>
 
</head>
 
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>Pais</td>
    <td><select name="pais0" id="pais0" onChange="llenaProvincia(this);">
         <option value="0">Elige pais</option>
        <option value="PaisA">PaisA</option>
        <option value="PaisB">PaisB</option>
      </select></td>
    <td>Provincia</td>
    <td><select name="prpais0" id="prpais0">
         <option value="0">Elige pais</option>
     </select></td>
  </tr>
  <tr>
    <td>Pais</td>
    <td><select name="pais1" id="pais1" onChange="llenaProvincia(this);">
         <option value="0">Elige pais</option>
        <option value="PaisA">PaisA</option>
        <option value="PaisB">PaisB</option>
      </select></td>
    <td>Provincia</td>
    <td><select name="prpais1" id="prpais1">
        <option value="0">Elige pais</option>
      </select></td>
  </tr>
  <tr>
    <td>Pais</td>
    <td><select name="pais2" id="pais2" onChange="llenaProvincia(this);">
          <option value="0">Elige pais</option>
       <option value="PaisA">PaisA</option>
        <option value="PaisB">PaisB</option>
      </select></td>
    <td>Provincia</td>
    <td><select name="prpais2" id="prpais2">
        <option value="0">Elige pais</option>
      </select></td>
  </tr>
</table>
 
 
</body>
</html>

Esto funciona.

Quim