HTML选择onchange更新查询

Question

I have a form with two select dropdowns. One with countries and one with universities. The country dropdown is populated from a MySQL database showing all countries inputted. At first I want the university dropdown to be populated with all the universities in the system however the end user wants the system to be dynamic and learn as it goes on so at this moment in time the dropdown doesn't show any data.

<select name="academicdropdown" onchange="countrysortlist()" style="width:178px">
<option value"">Sort By Country</option>
<option value"All" style="font-weight:bold; font-style:italic">All Countries</option>
<?php

while ($row=mysqli_fetch_array($countryresult2)) {

    $id = $row["country_id"];
    $country = $row["country"];
    echo "<option value='$id'>$country</option>\n";
}
?>
</select>

<select name="universitydropdown" onclick="unilist()" style="width:154px">
<option value"">University</option>
<?php

    if(isset($_SESSION['appformuniversity'])) {

    if($_SESSION['appformacademic'] == "universitylist") {

        $universityinput = $_SESSION['appformuniversitylist'];
                                                    while ($row=mysqli_fetch_array($universityresult)) {
                                                        $universityid = $row["university_id"];
                                                                $university = $row["university_name"];
                                                        if($universityid == $universityinput) {
                                                            echo "<option value='$universityid' selected='selected'>$university</option>\n";
                                                        }
        else {
                                                        echo "<option value='$universityid'>$university</option>\n";
                                                        }
    }
    }
else {
                                                while ($row=mysqli_fetch_array($universityresult)) {

        $universityid = $row["university_id"];
        $university = $row["university_name"];
        echo "<option value='$universityid'>$university</option>\n";
                                                    }
}
}
else {

   while ($row=mysqli_fetch_array($universityresult)) {

            $universityid = $row["university_id"];
    $university = $row["university_name"];
            echo "<option value='$universityid'>$university</option>\n";
   }
}
?>
</select></td></tr>

What I would like to do is when the user selects one of the countries in the country dropdown, it will update the universities dropdown with universities that are within that country. I know you have to use the onchange event but I do not know how to do the scripting side? Any help would be appreciated.

My university query at the moment is

$universitysql = "SELECT * FROM university ORDER BY university_name ASC" ;

Thanks in advance for any help. Much appreciated.

Answer 1

You can do something like this with javascript:

<script type="text/javascript">
function countrysortlist()
{
   document.form_name.submit();
}
</script>

When you change the select option, the site will update submitting the form

<form name='form_name' action='' method='get'>
<select name="academicdropdown" onchange="countrysortlist()" style="width:178px">
...
</select>
</form>

Then the query will load just the universities within the country id submitted.

<?php
$country_id = $_GET['academicdropdown'];
$universitysql = "SELECT * FROM university where countryid = '$country_id' ORDER BY university_name ASC" ;
?>

Answer 2

You have to use ajax for this. If you know Jquery it would be easier. Just include the
jquery.js file . Then write the ajax in the onchange function of the country dropdown.
In the onchange method just pass the id of the country. Then in your ajax method send 
id to a php page. In that page generate the whole option list from the sql query using
that country id . Make a relation between two tables i.e every university row should 
contain country id. Then echo the option list. In your ajax method just change the 
university list dynamically using innerhtml. I am giving you example 

1. onchange on country select

 onchange="countrysortlist(this.value)"

2. ajax method in countrysortlist function

  $.ajax({
     type: 'POST',
     url: 'yourpage.php',  // change name
     data: "countryid="+id,  // country id
     success: function(data) {  // returns date
           $('.result').html(data); // result should be the class name of university dropdown

     }
 });