Select Dependiente varias veces

ixus36900 · #1 (**permalink**) 11/05/2013, 11:29

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 !!

fhederico · #2 (**permalink**) 11/05/2013, 23:24

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

ixus36900 · #3 (**permalink**) 12/05/2013, 08:04

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:

fhederico · #4 (**permalink**) 12/05/2013, 09:32

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<select id="select1" onchange="cambiar(this.value);">

Saludos

diurno10 · #5 (**permalink**) 13/05/2013, 08:07

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.