Foros del Web » Programando para Internet » Javascript »

selects anidados

Estas en el tema de selects anidados en el foro de Javascript en Foros del Web. Hola a todos,este es mi primer mensaje,sigo el foro a menudo y para mi es de gran ayuda. Necesito colocar en una web 3 selects ...
  #1 (permalink)  
Antiguo 19/10/2011, 14:46
 
Fecha de Ingreso: octubre-2011
Ubicación: Barcelona
Mensajes: 5
Antigüedad: 13 años, 1 mes
Puntos: 0
selects anidados

Hola a todos,este es mi primer mensaje,sigo el foro a menudo y para mi es de gran ayuda.
Necesito colocar en una web 3 selects en los que los valores dependen del anterior.
Tengo:
Código HTML:
<form id="form" action="" method="post">
	<select name="busqueda1" id="busqueda1" />
				<option value='-'>Seleccione...</option>   
				<option value='AF'>Fragancias</option>  
				<option value='AM'>Cosmetica</option>  
				<option value='AI'>Accesorios</option>  
	</select>
	<select name="busqueda2" id="busqueda2" />

	</select>

	<select name="busqueda3" id="busqueda3" />

	</select>
	</form> 
el codigo jquery
Código:
	$("#busqueda1").change(
	function(evento)
	{
		var id = $("#busqueda1").find(':selected').val();
		//$('#busqueda2').html('<option selected>1</option>');
		$("#busqueda2").load("../includes/cargar_marcas.php");
	}
	);
y el fichero cargar_marcas.php
Código PHP:
<?php
echo '<option selected>1</option>';
?>
he consultado varias webs que lo realizan asi. Lo curioso para mi ( seguro que para vosotros no es curioso si no normal ) es que si intercambio la linea comentada por la posterior, es decir, si el Jquery queda:
Código:
	$("#busqueda1").change(
	function(evento)
	{
		var id = $("#busqueda1").find(':selected').val();
		$('#busqueda2').html('<option selected>1</option>');
		//$("#busqueda2").load("../includes/cargar_marcas.php");
	}
	);
me añade el option 1 al select "busqueda2" sin problemas. De la otra forma no me añade nada.

La idea es que cuando esto funcione poder pasarle la variable id como parametro a la pagina php y generar los options segun una busqueda en mi BBDD.

Mi nivel de conocimiento es medio, y la verdad es que llevo 6 horas con esto...
Espero que me podais ayudar! Muchisimas gracias!!
  #2 (permalink)  
Antiguo 19/10/2011, 16:08
Avatar de p3rikl3s  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 216
Antigüedad: 15 años, 9 meses
Puntos: 9
Respuesta: selects anidados

Prueba así:

Código:
$(document).ready(function(){
        $("#busqueda1").change(function(event){
            var id = $("#busqueda1").find(':selected').val();
            $("#busqueda2").load('cargar_marcas.php?id='+id);
        });
    });
__________________
También me hago llamar Tropiburguer. Sígueme en twitter: @tropiburguer

Última edición por p3rikl3s; 19/10/2011 a las 16:23
  #3 (permalink)  
Antiguo 20/10/2011, 01:39
 
Fecha de Ingreso: octubre-2011
Ubicación: Barcelona
Mensajes: 5
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: selects anidados

Buenos dias,
ante todo muchas gracias por responder.

Lo que me dices es igual, pero pasándole por url el valor de id. La idea es hacer esto, pero lo omití al ver que no me funcionaba. Es por eso que en el cargar_marcas.php tengo unicamente una linea escrita, para conseguir que primero me añada esa linea, y cuando lo consiga, pasarle el id y generar esas lineas dinamicamente.

No se si me explico..
Un saludo y gracias!!

EDITO:
Veo tambien que cambias la ruta de "cargar_marcas" y usas comilla simple. Lo he probado también pero me sigue sin funcionar...

Última edición por hectormr85; 20/10/2011 a las 01:44
  #4 (permalink)  
Antiguo 20/10/2011, 02:37
 
Fecha de Ingreso: octubre-2011
Ubicación: Barcelona
Mensajes: 5
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: selects anidados

Hola,
también he probado esto:

Código:
$("#busqueda1").change(
	function()
	{
	$.post('../includes/cargar_marcas.php',{id:$(this).val()},function(data)   {$("#busqueda2").html(data);});
	});
y eso

Código:
$("#busqueda1").change(function ()
	{
		alert ("ENTRO");
		$("#busqueda1 option:selected").each(function ()
		{
			var opcion1=$(this).val();
			alert (opcion1);
			$.post("../includes/cargar_marcas.php",{opcion_1: opcion1},function(datos)
			{
			$("#busqueda2").html(datos);
			});
		});
	});
con mismos resultados....me voy a volver loco! Gracias!!
  #5 (permalink)  
Antiguo 20/10/2011, 06:49
 
Fecha de Ingreso: octubre-2011
Ubicación: Barcelona
Mensajes: 5
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: selects anidados

He probado también:
Código:
	$("#busqueda1").change(
	function(event)
	{
		alert ("ENTRO EVENTO");
		var ruta='cargar_marcas.php';
		alert(ruta);
		$("#busqueda2").load(ruta);
                   //tambien he probado con .html() y .append()
	}
	);
con un cargar_marcas.php:
Código PHP:
<?php
echo "<option value=1>Option1</option>";
?>
De momento quiero añadir solo una linea, cuando vea esa linea ya le pasaré el ID y haré que el PHP genere HTML dinámico, pero es que lo mas fácil se me escapa!!
He probado tambien cargar un .HTML en vez de un .PHP y nada!!
En cambio si hago:
Código:
	$("#busqueda1").change(
	function(event)
	{
		alert ("ENTRO EVENTO");
		$("#busqueda2").html('<option value=1>Opcion1</option>');
	}
	);
me añade ese option...
¿A alguien se le ocurre algo? Gracias!!
  #6 (permalink)  
Antiguo 20/10/2011, 07:31
 
Fecha de Ingreso: octubre-2011
Ubicación: Barcelona
Mensajes: 5
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: selects anidados

Bueno, al fin lo tengo...error de novato, como no!

El problema es la ruta. Yo en el JS buscaba la ruta desde la carpeta donde tengo los scripts. Y la ruta que debia buscar era desde la raiz...

Entonces, simplificando, me queda
Código:
	$("#busqueda1").change(
	function(event)
	{
		$("#busqueda2").load('includes/cargar_marcas.php');
	}
	);
Y me añade la linea. Ahora a hacerlo dinámico.

Gracias a todos por contestarlo, leerlo, pensarlo o por dejarme comiendome el coco para que espavile!!

Saludos

Etiquetas: anidados, selects
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:18.