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