Foros del Web » Programando para Internet » Jquery »

Select Dependiente varias veces

Estas en el tema de Select Dependiente varias veces en el foro de Jquery en Foros del Web. Hola, estoy intentando generar una lista dependiente que se pueda usar varias veces, cuando selecciono el primer juego de opciones todo va perfecto, pero cuando ...
  #1 (permalink)  
Antiguo 11/05/2013, 11:29
 
Fecha de Ingreso: julio-2012
Ubicación: Bogota
Mensajes: 19
Antigüedad: 10 años, 8 meses
Puntos: 0
Select Dependiente varias veces

Hola, estoy intentando generar una lista dependiente que se pueda usar varias veces, cuando selecciono el primer juego de opciones todo va perfecto, pero cuando quiero seleccionar el segundo juego ya no funciona la opción dependiente, que debo hacer o que sugerencias me proponen.

dejo el código


Código HTML:
<!DOCTYPE html>
<head>
	<meta charset='UTF-8'>
	
	<title>Dynamic Dropdown</title>
	
	<link rel='stylesheet' href='css/style.css'>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

	<script>
		//<![CDATA[ 
$(window).load(function(){
// arrays instead of comma separated list and added base key
var data = {
        "base" : ["Please choose from above"],
        "matematicas": ["fabian","alejandro"],
        "fisica": ["enrique","fabian"],
		"quimica": ["martha","walter"],
}
    
$("#first-choice").change(function() {

        var first = $(this),
            second = $("#second-choice"),
            key = first.val(),
            // instead of the original switch code
            vals = data[key] == undefined ? data.base : data[key],
            html = [];
         // create insert html before adding
         $.each(vals,function(i,val){
              html.push('<option>'+val+'</option>')
         });
         // no need to empty the element before adding the new content
         second.html(html.join());        
});
});//]]>  


	</script>
</head>

<body>

	<div id="page-wrap">
	
		<h1>Materias</h1>
<form action="leer.php" method="post">
		<select id="first-choice" name="select1">
        <option selected value="base">Please Select</option>
        <option value="matematicas">Matematicas</option>
        <option value="fisica">Fisica</option>
		<option value="quimica">Quimica</option>
</select>


<select id="second-choice" name="select2">
        <option>Please choose from above</option>
</select>
<br>
<select id="first-choice" name="select1">
        <option selected value="base">Please Select</option>
        <option value="matematicas">Matematicas</option>
        <option value="fisica">Fisica</option>
		<option value="quimica">Quimica</option>
</select>


<select id="second-choice" name="select2">
        <option>Please choose from above</option>
</select>
<br>
<select id="first-choice" name="select1">
        <option selected value="base">Please Select</option>
        <option value="matematicas">Matematicas</option>
        <option value="fisica">Fisica</option>
		<option value="quimica">Quimica</option>
</select>



<select id="second-choice" name="select2">
        <option>Please choose from above</option>
</select>


<input type="submit">
</form>	
	</div>
	
</body>

</html> 

mil Gracias !!
  #2 (permalink)  
Antiguo 11/05/2013, 23:24
Avatar de fhederico  
Fecha de Ingreso: agosto-2009
Mensajes: 247
Antigüedad: 13 años, 7 meses
Puntos: 23
Respuesta: Select Dependiente varias veces

Hola,

Podrias explicarte un poco mejor por favor? Si entiendo bien tu codigo, cuando carga la pagina carga un array, luego si cambian el primer select, pobla o llena el segundo. Cuando llena el segundo que deberia hacer? o te refieres a que si cambias de nuevo el primer select, ya no cambia el segundo? Si es asi, fijate como te lo deja la primera vez que pobla el segundo select, es decir, si sigue manteniendo el ID, inspeccionalo con el firebug de firefox.

Saludos
  #3 (permalink)  
Antiguo 12/05/2013, 08:04
 
Fecha de Ingreso: julio-2012
Ubicación: Bogota
Mensajes: 19
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: Select Dependiente varias veces

Hola, si mira lo que sucede es que cuando selecciono la opcion 1 y subopcion 1 todo carga bien, pero cuando selecciono la opcion 2 y subopcion 2 solo carga la opcion 2 pero no carga la subopcion 2 como se ve en la imagen:

  #4 (permalink)  
Antiguo 12/05/2013, 09:32
Avatar de fhederico  
Fecha de Ingreso: agosto-2009
Mensajes: 247
Antigüedad: 13 años, 7 meses
Puntos: 23
Respuesta: Select Dependiente varias veces

Una consulta, tienes varias veces el mismo ID, y se supone que cada uno deberia tener un ID unico, porque no creas una funcion y la llamas mediante onchange en cada select? yo creo que simplemente se marea porque el no se da cuenta que tu quieres llamar a otra ID distinto del primero, ya que ese es el primero que encuentra, aunque suene un poco raro

Código HTML:
Ver original
  1. <select id="select1" onchange="cambiar(this.value);">

Saludos
  #5 (permalink)  
Antiguo 13/05/2013, 08:07
(Desactivado)
 
Fecha de Ingreso: abril-2013
Ubicación: rosario
Mensajes: 248
Antigüedad: 9 años, 10 meses
Puntos: 17
Respuesta: Select Dependiente varias veces

asi es como dice fede , tenes id repetidos en la misma pagina, lo cual no se debe, imaginate si estas dando una clase y decis : "pablo pase al frente" y tenes 9 pablos en el aula, se arma un kilombo barbaro, bueno a jQuery la sucede algo similar , ejejejje.

Etiquetas: clonar, combobox, dependiente, duplicar, javascript, opciones, select
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 09:42.