javascript y optgroup

caricatos · #1 (**permalink**) 13/04/2003, 17:04

Hola amigos:

Estuve investigando sobre las etiquetas select y option, para hacer una especie de página monográfica

... y ví como manipular las opciones con el objeto Option y los métodos asociados a select y option(add, remove... selectedIndex)

Si quisiera crear una serie de opciones de forma dinámica (sin usar innerHTML), existe algún método para agrupar opciones (optgroup)

Además, ¿hay otros métodos para la manipulación de opciones?

Saludos

Helbira · #2 (**permalink**) 14/04/2003, 04:03

No sé si te refieres a esto. Te hice un ejemplillo de prueba:

Código PHP:

  <html> 
<head> 
<script language="JavaScript"> 
<!-- 
function cambiaIdioma(optgroup) { 
   document.form1.mes.length=0; 
   switch(optgroup.value) { 
      case 'espanol': 
         document.form1.mes.options[0]=new Option('Enero','Enero'); 
         document.form1.mes.options[1]=new Option('Febrero','Febrero'); 
         document.form1.mes.options[2]=new Option('Marzo','Marzo'); 
         document.form1.mes.options[3]=new Option('Abril','Abril'); 
         document.form1.mes.options[4]=new Option('Mayo','Mayo'); 
         document.form1.mes.options[5]=new Option('Junio','Junio'); 
         document.form1.mes.options[6]=new Option('Julio','Julio'); 
         document.form1.mes.options[7]=new Option('Agosto','Agosto'); 
         document.form1.mes.options[8]=new Option('Septiembre','Septiembre'); 
         document.form1.mes.options[9]=new Option('Octubre','Octubre'); 
         document.form1.mes.options[10]=new Option('Noviembre','Noviembre'); 
         document.form1.mes.options[11]=new Option('Diciembre','Diciembre'); 
         break; 
      case 'ingles': 
         document.form1.mes.options[0]=new Option('January','Enero'); 
         document.form1.mes.options[1]=new Option('February','Febrero'); 
         document.form1.mes.options[2]=new Option('March','Marzo'); 
         document.form1.mes.options[3]=new Option('April','Abril'); 
         document.form1.mes.options[4]=new Option('May','Mayo'); 
         document.form1.mes.options[5]=new Option('June','Junio'); 
         document.form1.mes.options[6]=new Option('July','Julio'); 
         document.form1.mes.options[7]=new Option('August','Agosto'); 
         document.form1.mes.options[8]=new Option('September','Septiembre'); 
         document.form1.mes.options[9]=new Option('October','Octubre'); 
         document.form1.mes.options[10]=new Option('November','Noviembre'); 
         document.form1.mes.options[11]=new Option('December','Diciembre'); 
         break;         
    default: 
        break; 
} 
} 
//--> 
</script> 
</head> 
<body bgcolor="#FFFFFF"> 
<form name="form1" method="post" action=""> 
  <p> Idioma:  
    <select name="idioma" onChange="cambiaIdioma(this);void(null);"> 
      <option value="espanol">Español</option> 
      <option value="ingles">Inglés</option> 
    </select> 
  </p> 
  <p> Mes:  
    <select name="mes"> 
      <option value="Enero">Enero</option> 
      <option value="Febrero">Febrero</option> 
      <option value="Marzo">Marzo</option> 
      <option value="Abril">Abril</option> 
      <option value="Mayo">Mayo</option> 
      <option value="Junio">Junio</option> 
      <option value="Julio">Julio</option> 
      <option value="Agosto">Agosto</option> 
      <option value="Septiembre">Septiembre</option> 
      <option value="Octubre">Octubre</option> 
      <option value="Noviembre">Noviembre</option> 
      <option value="Diciembre">Diciembre</option> 
    </select> 
  </p> 
</form> 
</body> 
</html>

Un beso

caricatos · #3 (**permalink**) 14/04/2003, 05:11

Gracias Helbira:

Creo que lo que pusiste me puede ser útil, pero no es lo que pedía (aunque tomé nota)

Me refería a crear etiquetas optgroup dentro del select...

Un select creado sin script puede ser así:

Código PHP:

  <select name="idioma" onChange="cambiaIdioma(this);void(null);"> 
    <optgroup label=Spanish> 
        <option value="español">Español</option> 
    </optgroup> 
    <optgroup label=English> 
        <option value="inglés">Inglés</option> 
    </optgroup> 
</select>

Aunque sea un poco absurdo en el ejemplo, los elementos optgroup muestran el contenido del atributo label en negrita, y no se pueden seleccionar... como su nombre indica, es para agrupar opciones...

La verdad es que no se me ocurren ejemplos para modificar grupos de forma dinámica, pero pensaba que debería poderse hacer.

Bueno... haré algunas pruebas más, y si consigo algo, lo pondré aquí.

Saludos

Helbira · #4 (**permalink**) 14/04/2003, 05:20

No conocía esa propiedad de los select. Muchas gracias.

Nunca te acostarás sin saber una cosa más... así que ya me puedo acostar

Un beso

caricatos · #5 (**permalink**) 14/04/2003, 13:29

Hola Helbira:

No sabes lo que me gusta saber que alguien aprende algo, por alguna participación mía... y si se trata de un amigo/amiga mucho mejor.

Bueno. Ya que parece que lo que pido no es posible, trataré de intentarlo con el archiconocido innerHTML

Saludos

pepean74 · #6 (**permalink**) 09/02/2006, 10:44

no se si te sera de ayuda, pero ahi tienes un codigo q encontre por ahi

titulacions=document.forms["frmContex"].titulacio;
f(id==1)
{
var arrayTit = new Object();
arrayTit["Ciències Empresarials"] = "Estudis de 1r cicle";
arrayTit["Dret"] = "Estudis de 1r i 2n cicle";
arrayTit["Administració i Direcció dEmpreses"] = "Estudis de 2n cicle";
arrayTit["Ciències del Treball"] = "Estudis de 2n cicle";
arrayTit["Dret/Ciències Empresarials"] = "Itinerari curricular conjunt";
}
else if(id==2)
{
var arrayTit = new Object();
arrayTit["E.T.A. Especialitat Explotacions Agropecuàries"] = "Estudis de 1r cicle";
arrayTit["E.T.A. Especialitat Hortofructicultura i Jardineria"] = "Estudis de 1r cicle";
arrayTit["E.T.A. Especialitat Indústries Agràries i Alimentàries"] = "Estudis de 1r cicle";
arrayTit["E.T.A. Especialitat Mecanització i Construccions Rurals"] = "Estudis de 1r cicle";
arrayTit["E.T.F. Especialitat Explotacions Forestals"] = "Estudis de 1r cicle";
arrayTit["E.T.F. Especialitat Indústries Forestals"] = "Estudis de 1r cicle";

arrayTit["Biotecnologia"] = "Estudis de 1r i 2n cicle";

arrayTit["Ciència i Tecnologia dels Aliments"] = "Estudis de 2n cicle";
arrayTit["Enginyeria Agronòmica"] = "Estudis de 2n cicle";
arrayTit["Enginyeria de Forests"] = "Estudis de 2n cicle";
}
else if(id==3)
{
....
}

var titulacioNombre = '';
j=1;
for (var actual in arrayTit)
{
if (titulacioNombre != arrayTit[actual])
{
titulacioNombre = arrayTit[actual];
grupo= document.createElement('OPTGROUP');
grupo.label=titulacioNombre;
}
subgrupo=document.createElement('OPTION');
subgrupo.value=j;

if (window.navigator.appName.toLowerCase().indexOf("m icrosoft") > -1)
subgrupo.innerText=actual;
else
subgrupo.text=actual;

grupo.appendChild(subgrupo);
titulacions.appendChild(grupo);
j++;
}

SiR.CARAJ0DIDA · #7 (**permalink**) 09/02/2006, 17:35

innerHTML en un select en explorer no funciona, asi q la unica forma estandard de crear opciones y optgroup es con document.createElement()