[SOLUCIONADO] selectedIndex select dinamico

Fernarey1810 · #1 (**permalink**) 01/09/2014, 20:07

Probar el siguiente código por favor. La duda es la siguiente. Tengo un array de SELECTS que se van agregando dinamicamente y para tomar todos sus valores desde php necesito pasarlos como arrray.
Si lo uso de esta forma anda (pero esta forma no me sirve):

<select id="1" name="grups" size="1">
document.otro.grups.options[indice].value;

Si lo uso de esta otra forma no anda y esta es la forma que necesito que funcione:
<select id="1" name="grups[1]" size="1">
document.otro.grups[1].options[indice].value;

Como soluciono esto?.

Código Javascript:

Ver original<html>
<head>
<title></title>
<script>
var counter = 2;
var arreg = []; 
var ig = 0;
 
function crear(){
    var cadena = "XS:S:M:L:XL:XXL:XXXL:U:AM"; 
    var vec = cadena.split(":");
    var conjunto = "<option value='0'>Talles</option>"; 
                
    for (i = 0; i < (vec.length - 1); i++){     
        var indice = document.otro.grups.selectedIndex;
        var valor = document.otro.grups.options[indice].value;
        arreg[ig] = valor;
        if (vec[i] == arreg[ig]){ 
            conjunto += "<option selected value=\""+vec[i]+"\">"+vec[i]+"</option>";
            arreg[ig] = vec[i];
        }else
            conjunto+="<option value=\""+vec[i]+"\">"+vec[i]+"</option>";
    }
    ig++;  
    document.getElementById('pp').innerHTML+="<select id=\""+counter+"\" name=\"grups["+counter+"]\" size=\"1\">"+conjunto+"</select><input type='text'  id=\""+counter+"\" name=\"talle["+counter+"]\">";
     
    counter++;
}
</script>
</head>
<body>
<form action="Ej 1.html" method="post" name="otro"  >
<div id="pp">
    <select id="1" name="grups" size="1">
        <option value="0">Talles</option>
        <option value="XS">XS</option>
        <option value="S">S</option>
        <option value="M">M</option>
        <option value="L">L</option>
        <option value="XL">XL</option>
        <option value="XXL">XXL</option>
        <option value="XXXL">XXXL</option>
        <option value="U">U</option>
    </select>
    <input type="text"  id="1" name="talle[1]">
</div><br>
</form>
<br><br><br><a href="javascript:crear()">agregar select</a>
</body>
</html>

PHPeros · #2 (**permalink**) 02/09/2014, 05:41

Tal vez con array literal:

Código Javascript:

Ver originaldocument.otro["grups[1]"].options[indice].value;

Por lo demás, parece funcionar bien

Fernarey1810 · #3 (**permalink**) 02/09/2014, 17:00

Este es el error que me sale y no funciona. Usandolo de la manera que necesito y no anda tambien tira este error. Tenes idea como puedo arreglarlo?

Uncaught TypeError: Cannot read property 'selectedIndex' of undefined

Fernarey1810 · #4 (**permalink**) 02/09/2014, 17:29

ya esta lo solucione gracias a este sitio
http://www.lawebdelprogramador.com/c...s_maneras.html

solo necesitaba obtener el valor del select y aca te muestra como tomar ese valor de diferentes maneras. Este es el codigo:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>javascript - Obtener el valor de un select de varias maneras</title>
    <script>
    function capturar()
    {
        // obtenemos e valor por el numero de elemento
        var porElementos=document.forms["form1"].elements[4].value;
        // Obtenemos el valor por el id
        var porId=document.getElementById("seleccion").value;
        // Obtenemos el valor por el Nombre
        var porNombre=document.getElementsByName("seleccion")[0].value;
        // Obtenemos el valor por el tipo de tag
        var porTagName=document.getElementsByTagName("select")[0].value;
        // Obtenemos el valor por el nombre de la clase
        var porClassName=document.getElementsByClassName("formulario_select")[0].value;
        
        document.getElementById("resultado").innerHTML=" \
            Por elementos: "+porElementos+" \
            <br>Por ID: "+porId+" \
            <br>Por Nombre: "+porNombre+" \
            <br>Por TagName: "+porTagName+" \
            <br>Por ClassName: "+porClassName;
    }
    </script>
    
    <style>
        form   {width:250px;height:180px;border:1px solid #ccc;padding:10px;}
    </style>
</head>
 
<body>
    <h1>Obtener el valor de un select de varias maneras</h1>
    <form id="form1">
        Nombre:<br><input type="text" name="nombre" value="jose" id="nombre" class="formulario">
        
        <p><input type="checkbox" name="acepto" id="acepto" class="formulario_check"> Acepto el contrato</p>
        
        <p>Deacuerdo: Si<input type="radio" name="deacuerdo" value="si"> No<input type="radio" name="deacuerdo" value="no"></p>
        
        <p>
        <select name="seleccion" id="seleccion" class="formulario_select">
            <option value="1">primera</option>
            <option value="2">segunda</option>
        </select>
        </p>
    </form>
    <input type="button" value="Que valor hay en el select" onclick="capturar()">
    <div id="resultado"></div>
    
    <p><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p>
</body>
</html>

Fernarey1810 · #5 (**permalink**) 02/09/2014, 17:31

Por si les sirve con esta funcion quito los select que voy agregando. Doy por solucionado esto gracias.

Código Javascript:

Ver originalfunction quitar(){
    
    if (counter > 2){   
        var divs = document.getElementsByTagName('select');
        var divs2 = document.getElementsByTagName("input");
        var quitar = divs.length; 
        
        i = divs.length; 
        while (i) {
            i -= 1; 
            if (divs[i].getAttribute('id') == quitar) { 
                divs[i].parentNode.removeChild(divs[i]); 
                divs2[i].parentNode.removeChild(divs2[i]);
            }
        }       
        counter--;  
    }
}