Foros

Spy

Grupos

Iniciar Sesin | Regstrate

Pasar varios parmetros con JQuery y ajax

Responder

spectro200
11 jul 13, 12:40

#1

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 funcin de los dos
select anteriores.
El problema es que solo se pasar el parmetro del select anterior y no de los dos anteriores.
El cdigo 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 tambin
el del primer select
elegido=$(this).val();
elemento=.............
$.post("tipo", { elegido: elegido, elemento:elemento },
function(data){
$("#combo_marca3").html(data);
});
});
})
});
</script>

zoeshadow
11 jul 13, 14:29

#2

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 funcin ready tendrn
acceso a ella.
Creo que esto te solucionar el problema
Gantorys

11 jul 13, 16:08

#3

#4

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

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

Y declara SIEMPRE las variables con "var"

Editado 1 vez. ltima vez 11 jul 13, 16:12

tOWERR

11 jul 13, 16:28

#1
No sera ms cmodo recoger los valores de los select en variables y al final mediante la
funcin '$.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 perfeccin.
Te dejo un enlace de la funcin: http://api.jquery.com/jQuery.ajax/
1 respuesta

zoeshadow
11 jul 13, 18:07

#5

#4 Segn he entendido #1 necesita el valor de la primera para poder mostrar la segunda ( que
segn parece la genera en el servidor )
Tunnecino
11 jul 13, 18:35

No se, no he ledo el cdigo, soy as de perrens pero...

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

#6

1 respuesta

tOWERR

11 jul 13, 18:42

#7

El problema que el tiene creo que que no sabe pasar a la funcin los valores de los 2 ltimos
select. La solucin que veo es que capture los 3 valores en 3 variables, y cuando coja el valor
del ltimo todo lo mande a travs de la funcin ajax. No lo veo tan difcil. 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 enva.
Que se explique mejor #1.
1 respuesta

xMarston

11 jul 13, 20:02

#8

#1 Es ms sencillo de lo que crees, el valor seleccionado de un select se puede coger

mediante:
$('#elemento').val()

y as con los dems.

spectro200
12 jul 13, 11:28

#9

Siento no haber contestado antes pero he estado liado. Gracias a todos por las respuestas.
La solucin la he conseguido gracias a lo que Gantorys y xMarston han puesto. Era muy
sencillo pero no manejo mucho Jquery. :P

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

#7 Son selects dependientes y por tanto la funcin se enva cada vez que elijo una opcin 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

12 jul 13, 12:08

#10

#11

#9 Me alegro que te haya salido ya.

Entend mal tu pregunta.
xMarston

12 jul 13, 14:28

#9 se puede reducir el cdigo, 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

spectro200
16 jul 13, 11:59

#12

#13

#11 Probar a reducirlo como dices! :)

JuAn4k4

16 jul 13, 12:28

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>

Responder

Foros

Spy
2016 Mediavida | Versin clsica