jQuery没有根据条件显示下一个下拉列表

Question

MY logic is to make a Library Management System in which it first asks for students Class Name, than if Intermediate is selected (which is 1 in database) then show Intermediate Groups else if BS is selected than show BS Department.

<?php 

require '/include/connect.inc.php';
require '/include/core.inc.php';

?>
<script type="text/javascript" src="include/JS/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="include/JS/jQuery.js"></script>
<style>tr.Department_Options{ display: none; }</style>
<div class="articles">
    <form method="POST" action="#">
        <table align="center">
<tr><th><label for="ChoosedClassID">Class : </label></th><td><select  name="ChoosedClassID" id="ChoosedClassID"><option  disabled selected>Select Class :</option><?php 
$query="SELECT ClassID,ClassName from class ORDER BY ClassName ASC";
$query_run=mysqli_query($connect,$query) OR die(mysqli_error($connect));
while($catch=mysqli_fetch_array($query_run)) {
    $ClassName=$catch['ClassName'];
    $ClassID=$catch['ClassID']; ?>
  <option value="<?php echo $ClassID;?>"><?php echo $ClassName; ?></option> 
 <?php } ?></select><br></td></tr>

<tr id="tr_A" class="Department_Options"><th><label for="id_A">Choose Your Group : </label></th><td><select  name="InterGroupID" id="InterGroupID"><option  disabled selected>Intermediate Group :</option><?php
$query="SELECT DID,DepartmentName from department WHERE ClassID=1 ORDER BY DepartmentName ASC";
$query_run=mysqli_query($connect,$query) OR die(mysqli_error($connect));
while($catch=mysqli_fetch_array($query_run)) {
    $DepartmentName=$catch['DepartmentName'];
    $DID=$catch['DID']; ?>
  <option value="<?php echo $DID;?>"><?php echo $DepartmentName; ?></option> 
 <?php } ?></select><br></td></tr>

<tr id="tr_B" class="Department_Options"><th><label for="id_B">Choose Department : </label></th><td><select  name="DepartmentName" id="DepartmentName"><option  disabled selected>BS Department Name</option><?php
$query="SELECT DID,DepartmentName from department WHERE ClassID=2 ORDER BY DepartmentName ASC";
$query_run=mysqli_query($connect,$query) OR die(mysqli_error($connect));
while($catch=mysqli_fetch_array($query_run)) {
    $DepartmentName=$catch['DepartmentName'];
    $DID=$catch['DID']; ?>
  <option value="<?php echo $DID;?>"><?php echo $DepartmentName; ?></option> 
 <?php } ?></select><br></td></tr>
</table>                  
</form>
</div>

The jQuery.js File

$(document).ready(function(){

    $('#ChoosedClassID').on('change', function() {         

        $('tr.Department_Options').hide();
        $('#tr_' + $(this).val() ).show();

    });

});

According to code above, When I select BS,Intermediate, Next Drop Down Meny doesn't appear.

What I want is that drop down menu appear and when I select some value from it, it should ask for Student Library Number and then I want to make insert query.

Answer 1

Did you try some debugging in your JavaScript? Put temporary alert() statements in, thus:

$(document).ready(function(){
    alert(1);

    $('#ChoosedClassID').on('change', function() {         
        alert(2);

        $('tr.Department_Options').hide();
        $('#tr_' + $(this).val() ).show();

    });

});

Do you get "1" on page load and "2" on the control change event? That's the first thing you need to do. If you do, you could perhaps move onto looking at $(this).val() to see what value that resolves to.

As I outlined in the comments, it is worth checking your browser's console, in case any JavaScript errors pop up. Also, check your network panel to ensure your external JavaScript resources (jQuery in particular) are loaded correctly.