Como enviar select multiple utilizando ajax

[Montes28]

Como enviar select multiple utilizando ajax

Código HTML:

<select class="populate" multiple="multiple" id="e9" style="width:300px" name="e9">
 

Código Javascript:

$('#registrar').click(function(){
 
    var e9 = $("#e9").val();
    var estacion_id = $("#estacion_id").val();
 
    $.ajax({
        url:'http:/volcano/public/postInstalador',
                type:'post',
        data:'e9='+e9+'&estacion_id='+estacion_id
               }).done(function(data) {
            alert("Evento Guardado");
                    });
});
 

[Alexis88]

Podrías ir metiendo en una array a los valores que seleccionas del select múltiple, si le das clic a uno ya seleccionado, lo sacas del array. Al final, en lugar de enviar el valor del select que siempre será el primer valor seleccionado, envías el contenido del array que es el que contiene a todos los valores seleccionados. Un ejemplo.

Código HTML:

<select multiple>
    <option value = 1>UNO</option>
    <option value = 2>DOS</option>
    <option value = 3>TRES</option>
    <option value = 4>CUATRO</option>
    <option value = 5>CINCO</option>
</select>
<button>Check</button>
 

Código Javascript:

$("button").click(function(){
    var a = [],
        s = document.getElementsByTagName("select")[0],
        t = s.options.length;
    
    for (i = 0; i < t; i++)
        if (s.options[i].selected)
            a.push(s.options[i].value);
    
    $.ajax({
        url: "http:/volcano/public/postInstalador",
        type: "post",
        data: {e9: a, estacion_id: estacion_id}
    }).done(function(data){
        alert("Evento Guardado");
    });
});
 

Saludos

[Montes28]

Alexis88 gracias por responder , hice lo que me indicaste pero obtengo un error en

el error que obtengo en consola es

TypeError: s is undefined
t = s.options.length;

Código Javascript:

$('#registrar').click(function(){
 
    var a = [],
        s = document.getElementsByTagName("e9[]")[0],
        t = s.options.length;
    
    for (i = 0; i < t; i++)
        if (s.options[i].selected)
            a.push(s.options[i].value);
var estacion_id = $("#estacion_id").val();
 
 
 
$.ajax({
url:'http:/volcano/public/postInstalador',
type:'post',
data:'e9='+e9+'&estacion_id='+estacion_id
}).done(function(data) {
alert("Evento Guardado");
});
});
 

[Alexis88]

¿Y por qué pones e9[]?, fíjate que estoy tomando al select por su nombre de etiqueta, es decir, por select, no por el nombre que tiene. Si deseas tomarlo por su nombre, hazlo así:

Código Javascript:

s = document.getElementsByName("e9")[0]
 

Saludos

[Montes28]

Alexis88 gracias por responder, funciono perfecfo solo tengo una pregunta mas. con .done(function(data) {..... puedo retornar una url como por ejemplo http://localhost/volcano/public/instaladores/160

[Alexis88]

¿A qué te refieres con retornar una URL y para qué?

[Montes28]

Alexis88 lo que pasa es que tengo una pagina donde listo una consulta a una base de datos y tengo una modal que contiene el select multiple ya lo envio a la base de datos y ahora requiero que se visualice la pagina donde listo pero que se vea el nuevo registro tambien

[Alexis88]

Supongo que te refieres a cargar el contenido de esa página externa en un área específica de la página desde la que realizas la petición asíncrona (Ajax). En ese caso, puedes utilizar el método load que se usa así:

Código Javascript:

$("#idArea").load("tupagina.php");
 

Si te refieres a realizar una redirección, puedes hacerlo así:

Código Javascript:

$(location).prop("href", "tupagina.php");
 

Si no es ninguna de las anteriores, acláramelo para poder ayudarte.

Saludos