Home/ Questions/Q 8984145
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T21:01:18+00:00

trying to create a dependant select function that fetch json value from database, but

  • 0

trying to create a dependant select function that fetch json value from database, but i can’t get to pass second value from select to get the last option, this is my code:

<?php
include("../../cons/cons.php");
$busco = "SELECT distinct(HostCountry) as country From schools WHERE 1 order by country asc";
$bus = mysql_query($busco) or die(mysql_error());
?>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> 

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {

//first, detect when initial DD changes
$("#states").change(function() {
    //get what they selected
    var selected = $("option:selected",this).val();
    //no matter what, clear the other DD
    //Tip taken from: http://stackoverflow.com/questions/47824/using-core-jquery-how-do-you-remove-all-the-options-of-a-select-box-then-add-on
    $("#cities").children().remove().end().append("<option value=\"\">Select a City</option>");
    //now load in new options if I picked a state
    if(selected == "") return;
    $.getJSON("getcities.php?method=getcities&returnformat=json",{"stateid":selected}, function(res,code) {
        var newoptions = "";
        for(var i=0; i<res.length; i++) {
            //In our result, ID is what we will use for the value, and NAME for the label
            newoptions += "<option value=\"" + res[i].VALOR + "\">" + res[i].NOMBRE + "</option>";
        }
        alert (newoptions);
        $("#cities").children().end().append(newoptions);
    });
});


// mi mano

$("#cities").change(function() {
    //get what they selected
    var selected2= $("select.cities").val();
    alert( selected2);
    //no matter what, clear the other DD
    //Tip taken from: http://stackoverflow.com/questions/47824/using-core-jquery-how-do-you-remove-all-the-options-of-a-select-box-then-add-on
    $("#subject").children().remove().end().append("<option value=\"\">Select a Subject</option>");
    //now load in new options if I picked a state
    if(selected2 == "") return;
    $.getJSON("getsubject.php?method=getsubject&returnformat=json",{"cityid":selected2}, function(res2,code) {
        var newoptions = "";
        for(var i2=0; i2<res2.length; i2++) {
            //In our result, ID is what we will use for the value, and NAME for the label
            newoptions2 += "<option value=\"" + res2[i2].VALOR + "\">" + res2[i2].NOMBRE + "</option>";
        }
        $("#subject").children().end().append(newoptions2);
    });
});
//hasta aca

})
</script>
</head>
<body>


<form method="post" action="">
<select name="states" id="states">
<option value="">Select Country</option>
<?php while ($b = mysql_fetch_array($bus)){
$dato = $b['country'];
$valor = str_replace(" ","_", $dato);
echo "<option value = '$valor'>$dato</option>";
}
?>
</select>


<select name="cities" id="cities">
<option value="">Select a City</option>
</select>  

<select name="subject" id="subject">
<option value="">Select a Subject</option>
</select>   

</form>

</body>
</html>

Can you give me a hint? i get undefined on the second alert….. Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is no select with class cities it has id cities, so use 

    var selected2= $("#cities").val();

    or 

    var selected2= $(this).val();

    instead of

    var selected2= $("select.cities").val();
    • 0