Recorrer un arreglo de varios Select con Javascript

hmv · #1 (**permalink**) 02/07/2018, 07:44

Buenos días,

Tengo creado dinamicamente un array con varios select, y lo que quiero es obtener el valor de cada select para guardarlo en mi BD, pero no me sale

Código PHP:

  function crear_select()

    {

        var sel = document.createElement("select");

            sel.id='MySelect';

        var opt1 = document.createElement("option");    

            opt1.value='1';            

            opt1.text='AMEX';

            sel.add(opt1, null);

            

            var opt2 = document.createElement("option");    

            opt2.value='2';

            opt2.text='MASTER CARD';            

            sel.add(opt2, null);

            

            var opt3 = document.createElement("option");    

            opt3.value='3';

            opt3.text='VISA';            

            sel.add(opt3, null);

            

            var opt4 = document.createElement("option");    

            opt4.value='4';

            opt4.text='EFECTIVO';

            sel.add(opt4, null);

 
                       padre.appendChild(sel);    

     }

 
    function leer()

    {

        var sel = document.getElementById("MySelect")[0]; 

        var sel1 = document.getElementById("MySelect")[1]; 

        alert(sel.value+'--'+sel1.value);

            

    }

 
 <body>

 
   <div id="padre"></div>

  <input type="button" id="btn_agregar" value="crear select" onClick="crear_select()"><br>

  

 <input type="button" id="btn_leer" value="Leer" onClick="leer()"><br>

 

   

 </body>

tonigomila1988 · #2 (**permalink**) 03/07/2018, 03:12

Hola hmv,

creo que no entiendes como funciona el atributo id.

Según la definición de w3schools, el atributo id especifica una id única dentro de ese documento HTML. Cada vez que invocas el método crear_select, estás repitiendo esa id y si hay elementos con la misma id, JS solamente pillará el primer elemento creado con esa id.

Así que tienes que hacer 2 cosas:

1.- no incluir el atributo id en los select creados dinámicamente.
2.- ya que los metes dentro del div#padre, puedes hacer esto:

Código Javascript:

Ver originalvar padre = document.getElementById("padre");
var selects = padre.getElementsByTagName("select");

la variable selects te devolverá un array de todos los selects que estén dentro del div#padre y ya ahí podrás manipularlo como quieras.

Revisa tus conocimientos sobre atributos HTML. Un saludo.