Foros del Web » Programando para Internet » Javascript »

manejar ciclo de varios select options

Estas en el tema de manejar ciclo de varios select options en el foro de Javascript en Foros del Web. buenos dias chicos, he venido por aqui por que ya he investigado en internet y no me sale como hacer el script. tengo varios select ...
  #1 (permalink)  
Antiguo 10/02/2012, 22:05
Avatar de arcanisgk122  
Fecha de Ingreso: junio-2010
Mensajes: 755
Antigüedad: 14 años, 5 meses
Puntos: 28
manejar ciclo de varios select options

buenos dias chicos, he venido por aqui por que ya he investigado en internet y no me sale como hacer el script.

tengo varios select option del cual extraigo lo selecionado y lo capturo de esta forma:

Código Javascript:
Ver original
  1. var indice1 = document.forml.Materia1.selectedIndex
  2.     var indice2 = document.forml.Materia2.selectedIndex
  3.     var indice3 = document.forml.Materia3.selectedIndex
  4.     var indice4 = document.forml.Materia4.selectedIndex
  5.     var indice5 = document.forml.Materia5.selectedIndex
  6.     var indice6 = document.forml.Materia6.selectedIndex
  7.    
  8.     var mat1 = document.forml.Materia1.options[indice1].value
  9.     var mat2 = document.forml.Materia2.options[indice2].value
  10.     var mat3 = document.forml.Materia3.options[indice3].value
  11.     var mat4 = document.forml.Materia4.options[indice4].value
  12.     var mat5 = document.forml.Materia5.options[indice5].value
  13.     var mat6 = document.forml.Materia6.options[indice6].value

quisiera saber si esto se puede acortar ya que ocupa mucho espacio en el script completo. con un bucle for o while pero no tengo ni idea de como hacerle. supongo que debo con array.

les agradezco por toda su ayuda chicos.
__________________
Cooler Master Gladiator 600 - AMD PHENOM II X4 955 @ 3.5GHZ
GA-MA78GM-US2H - Super Talent 800 2GB x 2 Dual, (Unganged)
PSU Cooler Master eXtreme Power Plus 500W - Saphire R7-260OC-2GB
  #2 (permalink)  
Antiguo 10/02/2012, 22:17
Avatar de arcanisgk122  
Fecha de Ingreso: junio-2010
Mensajes: 755
Antigüedad: 14 años, 5 meses
Puntos: 28
Respuesta: manejar ciclo de varios select options

bueno estoy trabajando con este codigo el cual es la idea principal pero no se si este bien la sintaxis:

Código Javascript:
Ver original
  1. for (a=1;a<=14;a++){
  2.     var indice = new Array(14)
  3.     var indice[a] = document.form[a].Materia[a].selectedIndex
  4.     var mat = new Array(14)
  5.     var mat[a] = document.form[a].Materia[a].options[indice[a]].value
  6.     }
__________________
Cooler Master Gladiator 600 - AMD PHENOM II X4 955 @ 3.5GHZ
GA-MA78GM-US2H - Super Talent 800 2GB x 2 Dual, (Unganged)
PSU Cooler Master eXtreme Power Plus 500W - Saphire R7-260OC-2GB
  #3 (permalink)  
Antiguo 10/02/2012, 23:43
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 6 meses
Puntos: 1485
Respuesta: manejar ciclo de varios select options

buenas,
lo primero que las declaraciones de los arrays deberían estar fuera del bucle porque de lo contrario en cada ciclo se declara un nuevo array.

segundo, la referencia al formulario esta mal porque form no es una propiedad declarada de document. tengo duda de si tienes varios formularios o si es uno solo. si es uno solo, entonces no tiene sentido considerar la propiedad como un array indicando un índice variable. específicamente me refiero a esto form[a]. para obtener la referencia de un formulario hay múltiples formas como por ID o por la colección forms -nótese el plural-, entre otras. si vas a usar la colección forms, puedes indicar el nombre del formulario o el índice en caso de ser múltiples formularios.

Código:
document.forms['nombre'];
// referencia a un formulario en particular

document.forms[index];
// referencia a varios formularios, asumiendo que la variable index es un número que cambia en ciclo
tercero, la referencia al select Materia esta mal compuesta. lo que tu intentas hacer es componer el nombre del select con un número, pero en el código actual tiene un significado totalmente distinto. cuando quieras componer dinámicamente el nombre de una propiedad, debes cambiar la sintaxis de punto por corchetes y dentro de este componer un string.

Código:
object["property" + variable];
// aqui se concatena el string "property" con el valor de variable
// asumiendo que el valor es 0, el resultado es object["property0"] o lo mismo que object.property0

object.property[variable];
// notese que esto es totalmente distinto. aqui se considera la propiedad property como un posible objeto o array
// seria lo mismo que object.property.variable, en caso de ser un objeto
y cuarto, no hace falta obtener el índice del Option seleccionado para luego obtener su valor. simplemente puedes tomar el valor del select direcamente accesando la propiedad value del select.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #4 (permalink)  
Antiguo 11/02/2012, 14:43
Avatar de arcanisgk122  
Fecha de Ingreso: junio-2010
Mensajes: 755
Antigüedad: 14 años, 5 meses
Puntos: 28
Respuesta: manejar ciclo de varios select options

entonces quedaría asi , fijaos a ver si he pillado el temilla.

en respuesta a 1 utiliso form1 para hacer referencia al ID ya que no se si luego tenga la necesidad de incluir otro form.

Código Javascript:
Ver original
  1. var mat = new Array(14);
  2.     for (a=1;a<=14;a++){
  3.     var mat[a] = document.form1.object["Materia"+a].select.value;
  4.     }
tomad en cuenta que mat no lo eh concatenado por que la idea es que haga referencia a cada posición del array y que este esta inicialisado en la posicion uno con el for a=1, en cuanto a object: object["Materia"+a] este si lo concatenado por que tengo 14 select option en el cual lo que cambia es el ID de referencia, ya que a cada select le he puesto un numero al final que va de 1 a 14.
me indican si asi esta bien o tadavia tengo errores...



.
__________________
Cooler Master Gladiator 600 - AMD PHENOM II X4 955 @ 3.5GHZ
GA-MA78GM-US2H - Super Talent 800 2GB x 2 Dual, (Unganged)
PSU Cooler Master eXtreme Power Plus 500W - Saphire R7-260OC-2GB

Última edición por arcanisgk122; 11/02/2012 a las 14:48
  #5 (permalink)  
Antiguo 11/02/2012, 15:49
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 6 meses
Puntos: 1485
Respuesta: manejar ciclo de varios select options

todavia tienes errores. fíjate que los nombres que utilice fueron genéricos, no era que tenías que escribirlos así. es decir, document.form1.object["Materia"+a].select.value;, lo que esta marcado en rojo esta de más. object fue un nombre que utilice para referirme a cualquier objeto.

Cita:
tomad en cuenta que mat no lo eh concatenado por que la idea es que haga referencia a cada posición del array y que este esta inicialisado en la posicion uno con el for a=1,
esta más o menos bien, solo que debes tener en cuenta que los arrays comienzan desde la posición 0. de modo que tu array al final contiene 15 elementos. si lo vas a iterar, debes comenzar por el índice 1 (segunda posición del array) ya que la primera posición (índice 0) tendrá el valor undefined.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #6 (permalink)  
Antiguo 11/02/2012, 21:35
Avatar de arcanisgk122  
Fecha de Ingreso: junio-2010
Mensajes: 755
Antigüedad: 14 años, 5 meses
Puntos: 28
Respuesta: manejar ciclo de varios select options

entiendo entonces quedaria asi


Código Javascript:
Ver original
  1. var mat = new Array(14);
  2.     for (a=1;a<=14;a++){
  3.     var mat[a] = document.form1.["Materia"+a].value;
  4.     }

esto es lo que quiero hacer ...

Código Javascript:
Ver original
  1. function run(){
  2.  
  3.     var mat = new Array(14);
  4.     var hor = new Array(14);
  5.     var blo = new Array(14);
  6.     for (a=1;a<=14;a++){
  7.     //materias
  8.     var mat[a] = document.form1.["Materia"+a].value;
  9.     //horas
  10.     var hor[a] = document.form1.["Hora"+a].value;
  11.     //bloque
  12.     var blo[a] = document.form1.["Bloque"+a].value;
  13.     var salon = document.form1.salon.value;
  14.     }


.
__________________
Cooler Master Gladiator 600 - AMD PHENOM II X4 955 @ 3.5GHZ
GA-MA78GM-US2H - Super Talent 800 2GB x 2 Dual, (Unganged)
PSU Cooler Master eXtreme Power Plus 500W - Saphire R7-260OC-2GB

Última edición por arcanisgk122; 11/02/2012 a las 22:34
  #7 (permalink)  
Antiguo 12/02/2012, 03:12
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 6 meses
Puntos: 1485
Respuesta: manejar ciclo de varios select options

aún tienes errores; y vaya que no me había fijado otro detalle. var mat[a] = ... ahí javascript entiede que quieres crear una variable con nombre mat[a] pero la sintaxis no es válida. es decir, fíjate que tienes un var al inicio. la variable mat ya esta definida, por lo que no tienes que volver a usar la declaración var.

el otro error, no puedes usar ambas sintaxis a la misma para accesar una propiedad de un objeto. me refiero a esto, form1.["Materia"+a].value. fíjate que estoy marcando en rojo el punto antes de los corchetes. como había mencionado antes, en javascript tienes dos formas de accesar propiedades: por sintaxis de punto o por corchetes. puedes alternarlas, pero no debes usarlas ambas a la misma vez.
Código:
// asumiendo que tenemos el siguiente objeto
var obj = {
   arr: [0,1,1,2,3,5],
   pobj: {
      foo: "is_foo",
      bar: true
      },
   child: 2
};

// las siguientes muestras son sintaxis válidas
// digamos que queremos obtener la propiedad foo que contiene el string "is_foo"

// sintaxis de punto
obj.pobj.foo;

// sintaxis de corchete
obj['pobj']['foo']; 

// sintaxis de punto y corchete
obj.pobj['foo'];
obj['pobj'].foo;
básicamente el uso del corchete consiste en reemplazar el punto por un par de corchetes y dentro el nombre de la propiedad.
  #8 (permalink)  
Antiguo 12/02/2012, 13:18
Avatar de arcanisgk122  
Fecha de Ingreso: junio-2010
Mensajes: 755
Antigüedad: 14 años, 5 meses
Puntos: 28
Respuesta: manejar ciclo de varios select options

uff entonces ahora si entendi pero se me pone algo complejo la situacion

var mat[a] = document.form1.["Materia"+a].value;

me indicas que no tengo que declarar la variable mat entonces
quedaria eso asi:
mat[a]
y me indicas que no tengo que usar los corchetes.
quedaría entonces así
mat+a

yo antes utilizava esto mat[a] para indicar que el valor obtenido del select se guardara dentro del array mat donde [a] equivale a la posición del array.

si lo hago como me lo indicas quedaría así.

mat+b = document.form1['"Materia"+a']value;
aun no me queda claro lo de las comillas..

mi idea principal es hacer un bucle for que lea los 14 select y guarde en un array el valor de cada posición.
luego llenar un array de 40 espacios.
hago referencia al proyecto principal con un link:

http://www.forosdelweb.com/f13/manej...ptions-975139/
__________________
Cooler Master Gladiator 600 - AMD PHENOM II X4 955 @ 3.5GHZ
GA-MA78GM-US2H - Super Talent 800 2GB x 2 Dual, (Unganged)
PSU Cooler Master eXtreme Power Plus 500W - Saphire R7-260OC-2GB
  #9 (permalink)  
Antiguo 12/02/2012, 16:24
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 6 meses
Puntos: 1485
Respuesta: manejar ciclo de varios select options

ciertamente que tienes una comprensión bien desordenada. quizás, parte de ello es mi culpa por asumir que ya tienes algunos fundamentos en javascript. veamos como podemos disipar la niebla.

[ ] (corchetes)
en javascript, los corchetes tienen varios usos: crear un array literal, accesar elementos de un array (ya sea para leer un elemento o asignar un valor), o accesar una propiedad de un objeto — al menos esos son los usos que primero me vienen a la mente. no creo que en algún momento mencionara que no tienes que usar los corchetes cuando manejaras el array. en un array, el uso de los corchetes es sí o sí; pues así es como se accesan los índices. por tanto, mat + a es muy distinto de mat[a]. el primero intenta concatenar un objeto array con un número, mientras que el segundo significa accesar al índice del array. estoy casi seguro que en eso estás claro. lo que te pudo haber confundido fue la explicación sobre el keyword var y el nombre mat[a]; a continuación lo explicaré.

var mat[a]
var es un keyword que se utiliza para declarar o iniciar una variable. en tu caso, mat es un array que lo has inicializado así... var mat = new Array(14). parece que tu forma de visualizarlo es que debes declarar el índice de un array como si fuera una variable. eso es incorrecto, porque los índices de array no son variables; simplemente son elementos. al utilizar una expresión tal que var mat[a], javascript entiende que el nombre de la variable a declarar es mat[a], lo cual produce un error porque el nombre contiene caracteres inválidos. lo que tú quieres hacer no es declarar una variable con nombre mat[a], sino asignar un valor al array mat indicando como índice el valor de la variable a. de ahí la mención de que la declaración var en esa línea en particular está mal. simplemente elimina el keyword var.

corchetes como accesor de propiedades
la sintaxis de uso creo que ya está bastante explicada en los mensajes anteriores. pero aún tienes error en cómo se realiza la sustitución. pongamos esta norma básica: antes de un par de corchete no puede haber un punto; luego de los corchetes debe seguir un punto u otro par de corchete; dos o más pares de corchetes seguidos es válido. veamos las premisas en práctica.
Código:
// primera premisa
document.['form1']; // produce error, hay un punto antes de los corchetes
document['form1']; // forma correcta

// segunda premisa
document['form1']Materia1; // produce error, luego de los corchetes falta el punto
document['form1'].Materia1; // forma correcta con el punto
document['form1']['Materia1']; // forma correcta con corchete

// tercera premisa, la última línea de la segunda premisa es un ejemplo, pero expondré otros ejemplos válidos
[true, false, null, undefined, 0, ""]['length']; // el primer par de corchete es un array literal, el segundo es el accesor a la propiedad length

self['document']['forms'][0]['elements'][0]['value'];
// este ejemplo accesa a la propiedad value del primer campo en el primer formulario del documento

// nótese el error de esta línea, no cumple con la segunda premisa. 
// en particular, falta un punto luego de los corchetes porque haz indicado el nombre de la propiedad
document.form1['"Materia"+a']value;
¿qué va dentro de los corchetes?
en teoría, puede ir cualquier expresión que evalue a un valor. dicho de otra forma, cualquier expresión que puedas almacenar en una variable. incluso podrías encontrar expresiones un tanto descabellado en la sintaxis de corchete. en el caso de los objetos, se supone que dicho valor evalue a un string que represente el nombre de una propiedad. en los ejemplos anteriores utilicé directamente un string porque no tenía la necesidad de componer un string con otro valor. es decir, no necesariamente tienes que encerrar todo en comillas como lo muestras en el código. en tu ejemplo anterior, javascript entiende que el nombre de la propiedad es "Materia"+a porque se lo haz indicado como un string. es decir, lo haz envuelto todo en comillas simples. a continuación varios ejemplos de cosas válidas e inválidas.

Código:
// partimos de un objeto vacío para que se pueda apreciar el contexto en que se aplica
var obj = {}; // por si las dudas, es un objeto literal, o lo mismo que new Object()

// se invoca el método toString(). no hay ninguna expresión, solo una variable
var s = "toString";
obj[s]();

// se declaran dos propiedades, t, f. nótese la operación ternaria para accesar uno u otro.
// devuelve el boolean false. la condición de la operación es true, por tanto dicha operación
//  evalua y devuelve la expresión del componente verdadero. es decir, condicion? cierto: falso. en este caso,
// la expresión devuelta es el string "t" y da como resultado obj["t"] y finalmente obtienes el boolean false.
obj[f] = true;
obj[t] = false;
obj[true? 't': 'f'];

// este otro ejemplo utiliza el valor devuelto por una función
function dec2hex(n){
return "x"+ parseInt(n, 10).toString(16);
}

// los espacios están simplemente para legibilidad, no tienen ningún efecto salvo si es parte de un string
obj[ dec2hex(16) ] = 16;
obj[ dec2hex(100) ] = 100;
obj.x64; // devuelve el valor 100

// incluso es válido —aunque quizás falto de sentido— utilizar tipos de datos compuestos. no estoy seguro,
// que exactamente hace javascript con dichos valores, a mi entender lo convierte a string
obj[null]  = "is_null";
obj[ function(){} ] = "is_function";
obj[ {} ] = "is_object";
obj[ [] ] = "is_array";

fn = function(){};
obj[ document.getElementById('un_id_que_no_existe') ]; // devuelve "is_null" porque getElementById devuelve el valor null
obj[fn]; // devuelve "is_function"

obj[ new Object() ]; 
// devuelve "is_object" pese a que new Object() es una instancia distinta del objeto literal 
// cuando se creo que la propiedad, es decir obj[ {} ]

obj[ new Array() ]; // devuelve "is_array". lo mismo como el caso de new Object() pero con el array


// expresiones inválidas, practicamente cualquier sentencia que no se pueda almacenar en una variable o que no devuelve un valor
// por instancia, intentamos el equivalente del operador ternario anterior pero con if/else
obj[if(true) "f"; else "t"];

obj[for(var bool = true; bool; bool = !bool) null];
  #10 (permalink)  
Antiguo 12/02/2012, 21:56
Avatar de arcanisgk122  
Fecha de Ingreso: junio-2010
Mensajes: 755
Antigüedad: 14 años, 5 meses
Puntos: 28
Respuesta: manejar ciclo de varios select options

la exprecion correcta es esta

mat[a] = document.form1["Materia"+a].value;

Gracias
__________________
Cooler Master Gladiator 600 - AMD PHENOM II X4 955 @ 3.5GHZ
GA-MA78GM-US2H - Super Talent 800 2GB x 2 Dual, (Unganged)
PSU Cooler Master eXtreme Power Plus 500W - Saphire R7-260OC-2GB

Etiquetas: manejar, select, ciclos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:48.