Pasar varios parámetros con JQuery y ajax

S

spectro200 #1 Jul '13

Buenas, os comento que es lo que pretendo hacer. Tengo un select en 3 niveles dependientes, tengo un primer select que elige el "elemento", un segundo select que elige el "tipo del elemento" elegido anteriormente y un ultimo select que elige la "marca" en función de los dos select anteriores.

El problema es que solo se pasar el parámetro del select anterior y no de los dos anteriores.

El código que uso es el siguiente:

<script language="javascript">
	$(document).ready(function(){
		// Parametros para el elemento
	   $("#elemento").change(function () {
	   		$("#elemento option:selected").each(function () {
				//Capturo el valor a pasar
					elegido=$(this).val();
					$.post("elemento", { elegido: elegido }, function(data){
					$("#tipo").html(data);
					$("#combo_marca").html();
				});
	        });
	   })
		// Parametros para el tipo
	   $("#tipo").change(function () {
	   		$("#tipo option:selected").each(function () {
				//Aquí capturo el valor del segundo select y debo de pasar también el del primer select
					elegido=$(this).val();
					elemento=.............
					$.post("tipo", { elegido: elegido, elemento:elemento }, function(data){
					$("#combo_marca3").html(data);
				});
	        });
	   })
	});
</script>

zoeshadow #2 Jul '13

Declara la variable just debajo del document.ready

var elegido;

De manera que cuando abajo cambies el valor, se cambie el valor de la variable elegido que está declarado arriba, de esa manera todas las funciones dentro de la función ready tendrán acceso a ella.

Creo que esto te solucionará el problema

Gantorys #3 Jul '13

Para coger el valor de #elemento en el #tipo pon

var elemento = $('#elemento').val();

Y declara SIEMPRE las variables con "var"

1

tOWERR #4 Jul '13

#1

¿No sería más cómodo recoger los valores de los select en variables y al final mediante la función '$.ajax()' hacer el POST?
En la propiedad 'data' le indicas los valores que vas a pasarle y listo. Funcionando.

Yo es siempre lo que hago y me funciona todo a la perfección.

Te dejo un enlace de la función: http://api.jquery.com/jQuery.ajax/

1 1 respuesta

zoeshadow #5 Jul '13

#4 Según he entendido #1 necesita el valor de la primera para poder mostrar la segunda ( que según parece la genera en el servidor )

Tunnecino #6 Jul '13

No se, no he leído el código, soy así de perrens pero...

Espero que el elemento = .............. ese sea por que has ocultado algo xD Por cierto, ¿Te da algún tipo de error la consola javascript del navegador cuando seleccionas?

1 respuesta

tOWERR #7 Jul '13

El problema que el tiene creo que que no sabe pasar a la función los valores de los 2 últimos select. La solución que veo es que capture los 3 valores en 3 variables, y cuando coja el valor del último todo lo mande a través de la función ajax. No lo veo tan difícil. Lo que no sé es como manda los valores, si los manda cuando selecciona el último elemento, o cuando ha seleccionado los 3 valores da a un button y lo envía.

Que se explique mejor #1.

1 respuesta

xMarston #8 Jul '13

#1 Es más sencillo de lo que crees, el valor seleccionado de un select se puede coger mediante:

$('#elemento').val()

y así con los demás.

1

S

spectro200 #9 Jul '13

Siento no haber contestado antes pero he estado liado. Gracias a todos por las respuestas.

La solución la he conseguido gracias a lo que Gantorys y xMarston han puesto. Era muy sencillo pero no manejo mucho Jquery.

#6 Esa era la linea en la que no sabia que tenia que poner

#7 Son selects dependientes y por tanto la función se envía cada vez que elijo una opción del select.

Pego el codigo final por si a alguien le hiciera falta o tuviera un problema similar al mio.

<script language="javascript">
	$(document).ready(function(){
		// Parametros para el elemento
	   $("#elemento").change(function () {
	   		$("#elemento option:selected").each(function () {
					elegido=$(this).val();
					$.post("elemento", { elegido: elegido }, function(data){
					$("#tipo").html(data);
					$("#combo_marca3").html();
				});
	        });
	   })
		// Parametros para el tipo
	   $("#tipo").change(function () {
	   		$("#tipo option:selected").each(function () {
					elegido=$(this).val();
					var elemento =$('#elemento').val();
					$.post("tipo", { elegido: elegido, elemento:elemento }, function(data){
					$("#combo_marca3").html(data);
				});
	        });
	   })
	});
</script>

2 respuestas

tOWERR #10 Jul '13

#9 Me alegro que te haya salido ya.
Entendí mal tu pregunta.

xMarston #11 Jul '13

#9 se puede reducir el código, no hace falta que hagas esto:

$("#elemento option:selected").each(function () {
                                        elegido=$(this).val();

Con que cojas el seleccionado con $(this).val() es suficiente, ya luego haces la llamada a ajax.

1 respuesta

S

spectro200 #12 Jul '13

#11 Probaré a reducirlo como dices!

JuAn4k4 #13 Jul '13

Espero que te sirva:


<div id="select-dependientes">
<select id="select1">...

<select id="select2">

<select id="select3">
</div>


<script>
$(document).ready(function() {

// Seleccionar primer select -> Rellenar segundo
$("select-dependientes").on("change", "#select1", function(e) {
   var valor = $(this).val(); // El valor de este select/el primero. (Elemento)
   $.ajax({ 
	 type : "POST", // o "GET"
	 url : "/opciones-segundo-select"
	 data : { elemento : valor },
	 dataType : "json",
	 success : function(response) {
		// Rellenar el segundo select con opciones
		// El json de respuesta es algo asi como : [ { "value" : "1", "text" : "Opcion 1"}, { "value" : "2", "text" : "Opcion 2"}]
		$.each(response, function(idx, elm) {
			$("#select2").empty(); // Limpiar las opciones
			$("#select2").append($('<option></option>').attr("value", elm.value).text(elm.text));
		});	 
	 }
   });
   
});


// Seleccionar segundo select -> Rellenar tercero
$("select-dependientes").on("change", "#select2", function(e) {
   var valorSelect2 = $(this).val(), // El valor del segundo/este select (Tipo de Elemento)
	   valorSelect1 = $("#select1").val(); // El valor del primer select (Elemento)
	   
   $.ajax({ 
	 type : "POST", // o "GET"
	 url : "/opciones-tercer-select"
	 data : { elemento1: valorSelect1, elemento2 : valorSelect2 }, // Aquí pasas los 2 parametros
	 dataType : "json",
	 success : function(response) {
		// Rellenar el tercer select con opciones
		// El json de respuesta es algo asi como : [ { "value" : "1", "text" : "Opcion 1"}, { "value" : "2", "text" : "Opcion 2"}]
		$.each(response, function(idx, elm) {
			$("#select3").empty(); // Limpiar las opciones
			$("#select3").append($('<option></option>').attr("value", elm.value).text(elm.text));
		});	 
	 }
   });
   
});
});

</script>

Pasar varios parámetros con JQuery y ajax

Usuarios habituales

Tags