añadir datos a select mediante javascript

ZiTAL · #1 (**permalink**) 21/09/2006, 02:00

Hola a todos, aqui estamos a la carga otra vez, mi pregunta es como añadir datos a un select vacio mediante JavaScript.

Ejemplo:

Código HTML:

<html>
<head>
<script type="text/javascript">
 CargaCombo()
  {
    //Aqui la funcion para añadir datos al combo
  }
</script>
</head>
<body onLoad="CargaCombo()">
<form name="formu">
<select name="combo">
</select>
</form>
</body>

He intentado con:

Código:

document.formu.combo[0].value="cero";
document.formu.combo[1].value="uno";
document.formu.combo[2].value="dos";

pero dice que no existe el objeto (vamos normal).

Tambien me gustaria saber como se vacia un select.

Eso es todo, muchas gracias ;)

JavierB · #2 (**permalink**) 21/09/2006, 02:05

Hola ZiTAL

Para añadir opciones, mirate la FAQ-1:

http://www.forosdelweb.com/f13/faqs-javascript-105325/

para borrarlas utiliza:

document.forms[0].nombreSelect.options.length = 0;

Saludos,

djreficul · #3 (**permalink**) 21/09/2006, 02:08

Pues para vaciar un select no hay nada como:

Código HTML:

document.formu.combo[0].length=0;

Y para añadir objetos al combobox:

Código HTML:

document.forms.form1.mes.options[x]=new Option(texto,valor,"defaultSelected");

El parámetro defaultSelected solo es necesario para el valor que quieras que se quede como seleccionado. Espero q con estos ejemplos sea suficiente.

Saludos.

ZiTAL · #4 (**permalink**) 21/09/2006, 04:41

al final me ha quedado una cosa como esta, viendo las FAQ me he animado a hacer un combo y segun que eligas añade cosas en otro combo:

Código HTML:

<html>
<head>
<script type="text/javascript">
 function KargaC()
  {
    var s1=document.getElementById('bat');
    var s2=document.getElementById('bi');
    s1.options[0]=new Option("Bilbo","0","0");
    s1.options[1]=new Option("Bermio","1","1");        
    s1.selectedIndex=0;
    s2.options[0]=new Option("Moyua","0","0");    
    s2.options[1]=new Option("Abando","1","1");
    s2.selectedIndex=0;
  }
 function AldatuC(uan,txu)
  {  
   var s1=document.getElementById(uan);
   var s2=document.getElementById(txu);
   s2.options.length = 0; 
   if(s1.selectedIndex==0)
    {    	 
	 s2.options[0]=new Option("Moyua","0","0");
	 s2.options[1]=new Option("Abando","1","1");		     
	 s2.selectedIndex=0;
	}
   if(s1.selectedIndex==1)
    {     
	 s2.options[0]=new Option("Zubiaur tar Kepa","0","0");	 
	 s2.options[1]=new Option("Erremedio kalea","1","1");		     
	 s2.selectedIndex=0;
	}   
  }
</script>
</head>
<body onLoad="KargaC()">
<form name="formu" id="formu">
<select name="bat" id="bat" onChange="AldatuC('bat','bi')">
</select>
<select name="bi" id="bi">
</select>
</form>
</body>
</html>

Sobre:

Código:

document.forms.form1.mes.options[x]=new Option(texto,valor,"defaultSelected");

no funciona en firefox, tienes que jugar con selectedIndex, con esta forma funciona tanto en Firefox como en IE.

;)

djreficul · #5 (**permalink**) 21/09/2006, 04:43

Cita:

Iniciado por ZiTAL

Sobre:

Código:

document.forms.form1.mes.options[x]=new Option(texto,valor,"defaultSelected");

no funciona en firefox, tienes que jugar con selectedIndex, con esta forma funciona tanto en Firefox como en IE.

;)

Es interesante saberlo. Gracias Zital

Saludos.