链式ajax选择框

Question

I have some problems with my html/php/ajax code about dependent (or chained) select. I want to show in my menu the list of faculties after I have decided the university. I'll show you my (italian) code. I hope you'll help me. Thanks.

javascript ajax code:

<script type="text/javascript">

$(document).ready(function()
{

$(".universita").change(function()
{
var dataString = 'id='+ $(this).val();
$.ajax
({
type: "POST",
url: "ajax_facolta.php",
data: dataString,
cache: false,
success: function(html)
{
$(".facolta").html(html);
} 
});

}); 

});

html code about two select boxes:

<td align="right">Università:   </td>
    <td>
    <select class="input" name="universita">
        <option selected="selected">--Seleziona Università--</option>
    <?php 

        require('config.php');

        $query = mysqli_query($con, "SELECT * FROM UNIVERSITA order by id ASC");

        $num_righe = mysqli_num_rows($query);

        for($x=0; $x<$num_righe; $x++)
            {
            $rs = mysqli_fetch_row($query);
                            $id = $rs[0];
            $nome = $rs[1];
    ?>
            <option value="<?php echo $id;?>"> <?php echo $nome; ?></option>
    <?php
            }
    ?>
    </select></td>
</tr>
<tr>
    <td align="right">Facoltà: </td>
    <td><select class="input" name="facolta">
            <option selected="selected">--Seleziona Facoltà--</option>
        </select></td>
</tr>

the file ajax_facolta.php:

<?php

require('config.php');

if($_POST['id'])
{
    $id=$_POST['id'];
    $sql = mysqli_query($con, "SELECT * FROM FACOLTA WHERE id_univ='$id' ");

    echo '<option selected="selected">--Selziona Facoltà--</option>';

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

        $id=$row['id'];
        $nome=$row['nome'];
        echo '<option value="'.$id.'">'.$nome.'</option>';
        }

}

?>

and the simple configure.php:

<?php

$con = mysqli_connect("127.6.143.130","xxxxx","xxxxx", "jeme");

if (!$con)
  {
  die('Errore nella connessione: ' . mysqli_connect_error());
  }

?>

The database is very simple. UNIVERSITA has (id, nome) FACOLTA has (id, nome, id_univ). I do not find any errors but it does not work. Thanks for the help.

Answer 1

In HTML you have :

 <select class="input" name="universita">

and you are using

$(".universita").change(function()

$(".universita") will try to search HTML control having class name "universita"

So change few things in code. I hope it will work

1). <select class="input" name="universita" id="universita">
2). $("#universita").change(function()
3). <td><select class="input" name="facolta" id="facolta">
4). $("#facolta").html(html);

let me know is this helpfully?.