predeterminar un select formado automaticamente

Shiryu_Libra · #1 (**permalink**) 03/07/2007, 19:07

nueva duda, tengo el siguiente codigo el cual me sirve para rellenar un select con los años o cualquier cosa.....

Código HTML:

   function adOpt(oCtrl, iPs, sTt, sVl){
     var sOpcion=new Option(sTt, sVl);
     eval(oCtrl.options[iPs]=sOpcion);
   }

lo que me gustaria saber es... por ejemplo, hoy es 2007/07/03, entonces
con el codigo anteriormente escrito mas estos arreglos

Código:

   var a="Elejir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28";
   var b="Elejir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29";
   var c="Elejir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30";
   var d="Elejir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31";
   var e="Elejir Mes,Enero,Febrero,Marzo,Abril,Mayo,Junio,Julio,Agosto,Septiembre,Octubre,Noviembre,Diciembre";
   var f="Elejir Año,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013";

como puedo decir que 2007/07/03, sea "selected", que debo agregarle a la funcion, debo decir tambien, que el año, mes y dia, son selects independientes.....

alguna sugerencia caballeros?

derkenuke · #2 (**permalink**) 03/07/2007, 19:26

Hola:

No lo veo difícil. Sabidos el año, el día y el mes actual, tienes que asignar el atributo selected con el valor true o selected a la opción que te interese.

Si hoy es día 14, la opción que te interesa en el select de días es la 14 (sería la 13 si sólo tuvieras números, pero al tener la primera opción textual...).

Con el mes ocurre lo mismo, salvando que la funcion getMonth te devuelve el mes actual - 1.

Con el año lo tendríamos un poco menos evidente, pero bueno, sabido que el 2000 es la posición 1, el 2007 será la posición 8 (getYear() creo que ya está en desuso, lo mejor es que extraigas el último caracter de getFullYear() y le sumes una unidad).

Para poner la opción seleccionada en un select supongo que sabrás que es:
elSelect.options[x].selected = true
como te dije antes.

¿Por qué tienes 3 selects para los días?, ¿en función del mes que se seleccione se cambia el contenido de ese selects? Según como te lo he dicho no habría problema si utilizas este sistema

Un saludo.

PD: Elegir.

Shiryu_Libra · #3 (**permalink**) 03/07/2007, 20:25

derkenuke

bueno, recordemos que los usuarios son medios torpes

y bastante malos incluso para elejir algo como un calendario POPUP

, etc... lo que pasa es que como hice una pagina de previa para el usuario final se acostumbro a eso

... y la verdad no me gustaria cambiarle nada... jajajajjajaajajja... evitemos problemas por dedazo del usuario

volviendo al tema...

sugieres entonces que realize lo siguiente:

Código HTML:

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym

recordemos la funcion que anexa un option

Código HTML:

   function adOpt(oCtrl, iPs, sTt, sVl){
     var sOpcion=new Option(sTt, sVl);
     eval(oCtrl.options[iPs]=sOpcion);
   }

en esta otra parte que no agregue en el post anterior, mando llamar la funcion hasta que termine el arreglo

Código HTML:

for (i=0;i<ele.length;i++){
     adOpt(oCtrl,  i, ele[i], ele[i]);}
break;

que es recomendable, que anexe una funcion extra, el cual mire las opciones de los selects y despues, asignarle el TRUE?? algo asi??? o que lo anexe directamente en la funcion de insercion? algo asi como

if(oCtrl.options[iPs]=x){le anexo el true??}

creo que ya me confundi solo,

sqa212 · #4 (**permalink**) 04/07/2007, 12:44

<html>
<head>
<script language="javascript">
function adOpt(oCtrl, iPs, sTt, sVl){
var sOpcion=new Option(sTt, sVl);
eval(oCtrl.options[iPs]=sOpcion);
}

var a="Elejir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,1 6,17,18,19,20,21,22,23,24,25,26,27,28";
var b="Elejir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,1 6,17,18,19,20,21,22,23,24,25,26,27,28,29";
var c="Elejir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,1 6,17,18,19,20,21,22,23,24,25,26,27,28,29,30";
var d="Elejir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,1 6,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31";
var e="Elejir Mes,Enero,Febrero,Marzo,Abril,Mayo,Junio,Julio,Ago sto,Septiembre,Octubre,Noviembre,Diciembre";
var f="Elejir Año,2000,2001,2002,2003,2004,2005,2006,2007,2008,2 009,2010,2011,2012,2013";

for (i=0;i<ele.length;i++){
adOpt(oCtrl, i, ele[i], ele[i]);}
break;
</script>
<title></title>
</head>
<body>
<form name="formulario">
<select name="elemento">
</select>
</form>
<input type="button" onClick="adOpt('elemento', 5, sTt, sVl);">
</body>
</html>

¿se usaria de esta forma para que se seleccionase la 5 opcion?
¿que son sTt y sVl?

derkenuke · #5 (**permalink**) 04/07/2007, 15:34

Te contesto a tí sqa212 que lo tengo más fácil:

Cita:

Iniciado por sqa212

adOpt('elemento', 5, sTt, sVl);">

¿se usaria de esta forma para que se seleccionase la 5 opcion? ¿que son sTt y sVl?

No, la función adOpt() sirve para añadir (add) una option. Pero el primer parámetro tiene que ser un objeto <select>, y es un String, luego tendríamos que poner document.getElementById('elemento'). El 5 es en la posición que aparece y el sTt y sVl es el text y el value que llevará la opción añadida.

La mejor solución que me parece que tienes Shiryu_Libra es que la función adOpt() te devuelva el option añadido (return sOpcion;) y luego cuando los estás añadiendo ya haces:

Código PHP:

  var dias = c.split(",");

for (var i=0;i<dias.length;i++){

     var nueva_opcion = adOpt(select_dias, i, dias[i], dias[i]);

     if( dia == i ) 

         nueva_opcion.selected = true;

}

Y habría que ir haciendo con ese bucle y la condición que convenga (la que mencioné en el mi primer post) para los días, los meses y los años.

Cita:

Iniciado por Shiryu_Libra

que es recomendable, que anexe una funcion extra, el cual mire las opciones de los selects y despues, asignarle el TRUE?? algo asi??? o que lo anexe directamente en la funcion de insercion?

Puedes hacer lo que te comento, o puedes también como dices seleccionar luego el día, mes y año que sea. Te lo he dicho así por lo siguiente: Date cuenta que es más seguro poniendo un condicional if(dia == i) que haciendo select_dias.options[dia].selected = true, dado que igual hay un fallo en el script porque dia está fuera de rango, o es undefined, o algún error inesperado (ten en cuenta que depende de la máquina del cliente, puede que tenga la fecha con el año 2026 y tú no lo tienes en la lista, por ejemplo).

Si está dentro de un condicional si se cumple ejecuta el marcado de la option, y si no lo encuentra no da error javascript, simplemente no se selecciona nada.

Espero que así te funcione.

Un saludo

PD: Diría que el eval() de la función adOpt() sobra ¿no? Y rizando el rizo addOpt()

Shiryu_Libra · #6 (**permalink**) 04/07/2007, 16:58

de hecho te entendi desde el primero, solo que un post sin bromas, no es un post ultimamente, y pues mirando tu codigo que me has proporcionado

Cita:

var dias = c.split(",");
for (var i=0;i<dias.length;i++){
var nueva_opcion = adOpt(select_dias, i, dias[i], dias[i]);
if( dia == i )
nueva_opcion.selected = true;
}

esta perfecto... solo que un detallito amigo.... nada serio...
solo que en esta parte de la evaluacion

Cita:

if( dia == i )
nueva_opcion.selected = true;
}

debemos poner

Cita:

if( dia == i )
nueva_opcion.options[i].selected = true;
}

para que efectivamente selecciones lo que anteriormente escribiste

muy amable derkenuke, como siempre

dejo el script completo... se que habra mas, pero lo importante es enriquecer nuestro foro

SCRIPT:

Código HTML:

<script language="JavaScript">
   var mes;
   var qmes;
   var a="Elejir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28";
   var b="Elejir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29";
   var c="Elejir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30";
   var d="Elejir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31";
   var e="Elejir Mes,Enero,Febrero,Marzo,Abril,Mayo,Junio,Julio,Agosto,Septiembre,Octubre,Noviembre,Diciembre";
   var f="Elejir Año,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013";

   var mydate=new Date();
   var year=mydate.getYear();
   var dia=mydate.getDay();
   var mes=mydate.getMonth();
   if (dia<10){dia="0"+dia;}
   if (mes<10){mes="0"+mes;}
   if (year < 1000){year+=1900;}
    
   function adOpt(oCtrl, iPs, sTt, sVl){
     var sOpcion=new Option(sTt, sVl);
     eval(oCtrl.options[iPs]=sOpcion);}

   function inicializar(){
   alert("Dia "+dia+" mes "+mes+" year "+year);
   //Este pedazo es para los ciclos
   ele=f.split(",");
   oCtrl=document.getElementById('cicloa');
   while (oCtrl.length) oCtrl.remove(0);
   for (i=0;i<ele.length;i++){adOpt(oCtrl,  i, ele[i], ele[i]);}

    //este otro para los demas controles de fecha
    for(j=0;j<3;j++){
        switch(j){
            case 0: ele=f.split(",");
                    oCtrl=document.getElementById('years');
                    while (oCtrl.length) oCtrl.remove(0);
                    for (i=0;i<ele.length;i++){
                        adOpt(oCtrl,  i, ele[i], ele[i]);
                        if(ele[i]==year){oCtrl.options[i].selected = true;}}
                    break;
            case 1: ele=e.split(",");
                    oCtrl=document.getElementById('months');
                    while (oCtrl.length) oCtrl.remove(0);
                    for (i=0;i<ele.length;i++){
                        adOpt(oCtrl,  i, ele[i], i);
                        if(ele[i]==mes){oCtrl.options[i].selected = true;}}
                    break;
            case 2: ele=d.split(",");
                    oCtrl=document.getElementById('days');
                    while (oCtrl.length) oCtrl.remove(0);
                    for (i=0;i<ele.length;i++){
                        adOpt(oCtrl,  i, ele[i], ele[i]);
                        if(ele[i]==dia){oCtrl.options[i].selected = true;}}
                    break;
            }
        }
   }

   function Cambia(oCtrl){
    while (oCtrl.length) oCtrl.remove(0);
    mes=document.getElementById('months').selectedIndex;
    switch (mes){
        case 1: qmes=2; break;
        case 2: qmes=0; break;
        case 3: qmes=2; break;
        case 4: qmes=1; break;
        case 5: qmes=2; break;
        case 6: qmes=1; break;
        case 7: qmes=2; break;
        case 8: qmes=2; break;
        case 9: qmes=1; break;
        case 10: qmes=2; break;
        case 11: qmes=1; break;
        case 12: qmes=2; break;
        }
    switch (qmes){
     case 0: 
        ele=a.split(",");
        for (i=0;i<ele.length;i++){
            adOpt(oCtrl,  i, ele[i], i);
            }
      break;
     case 1: 
        ele=c.split(",");
        for (i=0;i<ele.length;i++){
            adOpt(oCtrl,  i, ele[i], i);
            
            }
      break;
     case 2: 
        ele=d.split(",");
        for (i=0;i<ele.length;i++){
            adOpt(oCtrl,  i, ele[i], i);
            }
      break;
    }
   }
</script>

y la forma en que mando llamar en los selects

Cita:

muchas gracias derkenuke

, ya funciona perfecto, ahora que si se puede depurar mas el codigo seria excelente

suerte

derkenuke · #7 (**permalink**) 05/07/2007, 05:51

Cita:

Iniciado por Shiryu_Libra

de hecho te entendi desde el primero, solo que un post sin bromas, no es un post ultimamente, y pues mirando tu codigo que me has proporcionado

Código PHP:

  var dias = c.split(",");

for (var i=0;i<dias.length;i++){

var nueva_opcion = adOpt(select_dias, i, dias[i], dias[i]);

if( dia == i )

nueva_opcion.selected = true;

}

esta perfecto... solo que un detallito amigo.... nada serio...

Código PHP:

  if( dia == i )

nueva_opcion.selected = true;

}

solo que en esta parte de la evaluacion
debemos poner

Código PHP:

  if( dia == i )

nueva_opcion.options[i].selected = true;

}

para que efectivamente selecciones lo que anteriormente escribiste

Creo que has pasado por alto que nueva_opcion es la opción (que te devuelve adOpt()), no es el select. El select es select_dias, así que no veo fallos.

He hecho un par de cambios con tu permiso

. He simplificado ciertas cosas.

Lo primero es utilizar getFullYear().

Al principio, para rellenar los selects has puesto un bucle for que recorre los valores 0,1,2. Pero luego has puesto un switch con esos mismos casos. No tiene mucho sentido poner un switch si se va a entrar en todos los casos obligatoriamente. He quitado el bucle y el switch, que se anulaban mutuamente.

También he añadido soporte para años bisiestos (faltaría hacer lo mismo que hacemos con los meses de Cambiar, pero con los años).

En el switch de Cambiar también he simplificado algo, me parecía más cómodo así.

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

 
<BODY>

<select id="years" name="years"></select>

<select id="months" name="months" onchange="Cambia(document.getElementById('days'))" ></select>

<select id="days" name="days"></select>

 
<script language="JavaScript">

 
var a="Elegir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28";

var b="Elegir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29";

var c="Elegir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30";

var d="Elegir Dia,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31";

var e="Elegir Mes,Enero,Febrero,Marzo,Abril,Mayo,Junio,Julio,Agosto,Septiembre,Octubre,Noviembre,Diciembre";

var f="Elegir Año,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013";

 
var mydate=new Date();

var year=mydate.getFullYear();        // full en vez de normal, el normal está en desuso

var dia=mydate.getDay();

var mes=mydate.getMonth();

if (dia<10){dia="0"+dia;}

if (mes<10){mes="0"+mes;}

//if (year < 1000){year+=1900;}

    

function addOpt(oCtrl, iPs, sTt, sVl){

    var sOpcion=new Option(sTt, sVl);

    oCtrl.options[iPs]=sOpcion;

    return sOpcion;

}

 
function esBisiesto(nAno){

    var bRes = true;

    res = bRes && (nAno % 4 == 0);

    res = bRes && (nAno % 100 != 0);

    res = bRes || (nAno % 400 == 0);

    return bRes;

} 

 
function inicializar(){

    alert("Dia "+dia+" mes "+mes+" year "+year);

    //Este pedazo es para los ciclos

    //ele=f.split(",");

    //oCtrl=document.getElementById('cicloa');

    //while (oCtrl.length) oCtrl.remove(0);

    //for (i=0;i<ele.length;i++){addOpt(oCtrl,  i, ele[i], ele[i]);}

 
    //este otro para los demas controles de fecha

    //años

    ele=f.split(",");

    oCtrl=document.getElementById('years');

    while (oCtrl.length) oCtrl.remove(0);

    for (var i=0;i<ele.length;i++){

        var nueva_opcion = addOpt(oCtrl,  i, ele[i], ele[i]);

        if(ele[i]==year){nueva_opcion.selected = true;}

    }

    //meses

    ele=e.split(",");

    oCtrl=document.getElementById('months');

    while (oCtrl.length) oCtrl.remove(0);

    for (var i=0;i<ele.length;i++){

        var nueva_opcion = addOpt(oCtrl,  i, ele[i], i);

        if( (i-1)==mes ){nueva_opcion.selected = true;}

    }

    //dias

    ele = esBisiesto(year) ? b : a;

    ele=ele.split(",");

    oCtrl=document.getElementById('days');

    while (oCtrl.length) oCtrl.remove(0);

    for (var i=0;i<ele.length;i++){

        var nueva_opcion = addOpt(oCtrl,  i, ele[i], ele[i]);

        if(ele[i]==dia){nueva_opcion.selected = true;}

    }

}

 
 
 
function Cambia(oCtrl) {

    var qmes, i=document.getElementById('months').selectedIndex;

    switch (i) {

        case 1: case 3:    case 5:    case 7:    case 8:    case 10: case 12: qmes=d; break;

        case 4: case 6:    case 9:    case 11: qmes=c; break;

        case 2: qmes=esBisiesto(year)? b : a; break;

        default: qmes=false;

    }

    if( qmes ) {

        while (oCtrl.length) oCtrl.remove(0);

        ele=qmes.split(",");

        for(i=0;i<ele.length;i++) {

           addOpt(oCtrl,  i, ele[i], ele[i]);

        }

    }

}

 
 
window.onload = inicializar;

</script>

 
 
</BODY>

</HTML>

Bueno, supongo que así más o menos empezaríamos a tenerlo, pero falta el detallito ese de cambiar los días si el año cambia a bisiesto

Un saludo.

Shiryu_Libra · #8 (**permalink**) 05/07/2007, 11:22

esto es lo que me gusta de javascript puro, que siempre habra una mejora en el codigo "BRUTO", de cualquier caso

y no tener que batallar con FW, como en el post de la competencia

pondre tu codigo en uso, lo que sea por eliminar lineas de codigo, es bueno siempre

Anexo: p.d., tienes razon, ayer no mire tu sentencia bien y pase efectivamente por alto lo que mencionaste. ya ves esos dias donde por mas que quieres avanzar, te regresas 3 pasos