Llenar select con un array

andama · #1 (**permalink**) 09/11/2008, 15:33

Tengo que llenar un select con datos que tengo en un array, o sea que cada option se un elemento de ese array como hago?

yo estoy haciuendo esto:

for(var i=0;i<carreras.length;i++){
carreraElegida = document.getElementById("carrera").getElementsByTa gName("option")[i];
carreraElegida.removeChild(carreraElegida.firstChi ld);
carreraElegida.appendChild(document.createTextNode (carreras[i]));

}

pero solo me llena el primero.

Gracias a quien pueda ayudarme!

David · #2 (**permalink**) 09/11/2008, 15:39

En este caso creo que no es necesario manipular el DOM directamente. ¿Qué tal así?:

Código javascript:

Ver originalvar carrera = document.getElementById("carrera"); /* Para no tener que llamar a cada rato a getElementById */
for(var i=0;i<carreras.length;i++){ 
        carrera.options[i] = new Option(carreras[i]);
       }

andama · #3 (**permalink**) 09/11/2008, 15:58

Te agradezco mucho, pero me pasa lo mismo, solo aparece la primer opcion y me da este error:

carrera.options[i] is undefined.

lo mismo que me pasaba antes...

David · #4 (**permalink**) 09/11/2008, 16:03

¿Puedo ver el HTML como lo tienes ahora?. Además, ¿en qué parte da ese error?, porque al asignar no puede ser

.

andama · #5 (**permalink**) 09/11/2008, 16:11

esta es la parte de HTML

Código HTML:

<select id="carrera"><option>Aca van las carreras</option></select><br />

por lo que veo el error lo da cuando vuelve a entrar al for, porque el primero lo pone correctamente

gracias

David · #6 (**permalink**) 09/11/2008, 16:20

Tal vez si pones el HTML completo, porque yo he probado de esa forma y funciona.

.

andama · #7 (**permalink**) 09/11/2008, 16:24

Cita:

Iniciado por David el Grande

Tal vez si pones el HTML completo, porque yo he probado de esa forma y funciona.

.

este es el HTMl completo

Código HTML:

t<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Segundo TP - Programacion I</title>
<script src="script.js" type="text/javascript"></script>
<style>
fieldset {	display:block;	float:left;	width:440px;	margin:10px;	padding:10px; }
* html .floatFix {height:1%; }
* + html .floatFix {height:1%; display:inline-block;} 
.floatFix:after {content:"PEPE"; display:block; clear: both; height:0; visibility: hidden;}
</style>
</head>

<body>
<h1>Ficha personal del alumno <i>APELLIDO, NOMBRE</i></h1>
<div class="floatFix">
    <fieldset>
    	<legend>Datos personales</legend>
        <ul id="datos">
            <li>Aca va el apellido del alumno</li>
            <li>Aca va la materia del tp</li>
            <li>Aca va el cuatrimestre y comision del alumno</li>
            <li>Aca va la pagina personal. Debe abrir una ventana popup de 800 x 600 centrada horizontalmente</li>
        </ul>
        <select id="carrera"><option>Aca van las carreras</option></select><br />
        <select id="materias" disabled="disabled"><option>Seleccione una carrera para ver las materias</option></select><br />
    </fieldset>
    <fieldset>
    <legend>Equipo</legend>
        <div id="equipo">
        <img name="bandera" src="flags/none.jpg" style="float:right;" />
            Equipo de futbol<br />
            <label><input type="checkbox" id="seleccionar_equipo" />Seleccionar equipo</label><br />

            <label>&nbsp;&nbsp;<input type="radio" name="equipo" value="Boca" disabled="disabled" />Boca</label><br />
            <label>&nbsp;&nbsp;<input type="radio" name="equipo" value="River" disabled="disabled" />River</label><br />
            <label>&nbsp;&nbsp;<input type="radio" name="equipo" value="SanLorenzo" disabled="disabled" />San Lorenzo</label><br />
            <label>&nbsp;&nbsp;<input type="radio" name="equipo" value="Racing" disabled="disabled" />Racing</label><br />
            <label>&nbsp;&nbsp;<input type="radio" name="equipo" value="Tigre" disabled="disabled" />Tigre</label><br />
            <label>&nbsp;&nbsp;<input type="radio" name="equipo" value="otro" id="otro" disabled="disabled" />Otro</label>
            
        </div>
    </fieldset>
</div>
<div class="floatFix">
	<fieldset id="suscripcion">
    	<legend>Datos de suscripcion</legend>
        <table cellpadding="3" cellspacing="0" border="0">
        <tr><td>Usuario:</td><td><input type="text" id="nombre" /></td></tr>
        <tr><td>Clave:</td><td><input type="text" id="clave" /></td></tr>
        <tr><td>Reingrese la clave:</td><td><input type="text" id="clave2" /></td></tr>
        <tr><td>Fecha nacimiento [a�o/mes/dia]:</td><td><input type="text" id="fecha" /></td></tr>
        <tr><td>Edad:</td><td><input type="text" id="edad" disabled="disabled" readonly="readonly" /></td></tr>
        <tr><td>&nbsp;</td><td><input type="button" id="validar" value="validar datos" />&nbsp;<input type="button" id="borrar" value="borrar todo" />
        </table>
    </fieldset>
	<fieldset id="uploads">
    	<legend>Archivos adjuntos</legend>
        <input type="button" id="agregar" value="otro archivo" />
        <div id="archivo1"><input type="file" /><input type="button" id="quitar" value="quitar" /></div>
    </fieldset>
</div>
<em>Las pautas de este trabajo practico estan detalladas en el documento 'pautas tp2.doc' publicada en el FTP de carreras</em>
</body>
</html>

y este es el array :
var carreras = ['Disenio web','Disenio multimedial','Disenio grafico'];

me resulta muy raro a mi tambien que me diga indefinida cuando está definida.
Te agradesco tu ayuda

David · #8 (**permalink**) 09/11/2008, 16:28

¿Y el script.js?

.

andama · #9 (**permalink**) 09/11/2008, 16:31

Cita:

Iniciado por David el Grande

¿Y el script.js?

.

ES ESTO LO QUE VOS ME PASASTE ANTES:

var carrera = document.getElementById("carrera");
for (var i = 0; i < carreras.length; i++) {

carrera.options[i].text = carreras[i];

David · #10 (**permalink**) 09/11/2008, 16:33

Pero, ¿así sin más?. Porque si así es no va a funcionar, ya que estás tratando de modificar un elemento antes que sea creado. Debes esperar hasta el evento onload para realizar las modificaciones.

andama · #11 (**permalink**) 09/11/2008, 16:37

Cita:

Iniciado por David el Grande

Pero, ¿así sin más?. Porque si así es no va a funcionar, ya que estás tratando de modificar un elemento antes que sea creado. Debes esperar hasta el evento onload para realizar las modificaciones.

Perdón pensé que con eso era suficiente, tengo así

var carreras = ['Disenio web','Disenio multimedial','Disenio grafico'];

window.onload = cursos;

function cursos(){

var carrera = document.getElementById("carrera");
for (var i = 0; i < carreras.length; i++) {

carrera.options[i].text = carreras[i];
}

David · #12 (**permalink**) 09/11/2008, 16:42

Pero no lo pusiste como te dije en el segundo mensaje

.

O sea, con new Option para crear una nueva opción y asignarla.

Saludos

.

andama · #13 (**permalink**) 09/11/2008, 16:46

Cita:

Iniciado por David el Grande

Pero no lo pusiste como te dije en el segundo mensaje

.

O sea, con new Option para crear una nueva opción y asignarla.

Saludos

.

tenes, razón, pero la verdad que no vi esa parte. Perdón
y muchas gracia por tu ayuda

andama · #14 (**permalink**) 09/11/2008, 17:18

Cita:

Iniciado por andama

tenes, razón, pero la verdad que no vi esa parte. Perdón
y muchas gracia por tu ayuda

Una pregunta más... como le asigno un value a cada option?? porque luego tengo que hacer que segun que opcion se elija se habilite otro combo

gracias

David · #15 (**permalink**) 09/11/2008, 17:20

Si buscas en el foro verás que este tema ya fue tratado en otras ocasiones, pero bueno, es así:

Código javascript:

Ver originalobj.options[i].value = "Valor";

Lógicamente, obj lo reemplazas por la referencia a tu select.

finolns · #16 (**permalink**) 15/11/2011, 12:07

Hola David,...mira aun me falta aprender a intercambiar informacion entre JavaScript y PHP.

En mi caso, tengo una consulta en PHP, la cual paso a un arrego en Javascript, a la vez ese arreglo lo empleo para llenar un combo que se crea en una función que genera dinámicamente una tabla con campos de formulario <input> y <select>, podrías indicarme como debo hacer porque al momento de pulsar el botón para agregar una línea, simplemente no produce un ningún resultado, en cambio si le quito la opción de llenar el combo pero claro sin opciones, espero haber sido claro.

josepeet_4 · #17 (**permalink**) 16/03/2012, 06:21

David, podrias ayudarme con la misma duda? Yo he seguido el mismo ejemplo este que has dicho, pero no me sale. Te paso el codigo:

Código HTML:

Ver original<div id="div1">
<select id="consola"><option></option></select>
</div>

Esto es la parte del HTML

Y la parte del script tengo esto:

Código Javascript:

Ver originalvar consolas = new Array ("Playstation", "XBOX", "Wii");
window.onload = mostrarfoto();
 
function mostrarfoto() {
            var consola = document.getElementById("consola");
            for (var i = 0; i < consolas.length; i++) {
                consola.options[i].text = new option (consolas[i]);
            }
        }

graciass

Panino5001 · #18 (**permalink**) 16/03/2012, 07:40

josepeet_4: por favor no abras nuevos temas por el mismo asunto.
Continúa aquí: http://www.forosdelweb.com/f13/dudas...arrays-981807/