从属下拉列表

Question

i have a problem in dependent dropdown and i am not professional in this issue

so the problem is when i choose the first one the another one doesnt get any value from database and i didnt know the solution

<?php
include 'header.php';
require 'connection.php';
?>

<div class="container">  
<form id="contact" action="add_line.php" method="post">
<center> <h3>Add Line</h3></center>
<fieldset>
<?php  
require 'connection.php';
$query = "select * from agents";
$result = mysqli_query($conn,$query);
?>
<div class="select">
<select class="agents-name " name="agents-name" autofocus tabindex="1">
<option selected="selected">--Select agent--</option>
<?php while ($row = mysqli_fetch_assoc($result)): ?>
<option value="<?php $row['id'];?>"><?php echo $row['name'];?></option>
<?php endwhile;?>
</select>
</div>
<div class="select" >
<select tabindex="1" name="sp_choosen" class="sp_choosen"             
onChange="getState( this.value );" tabindex="2">
<option selected="selected">--Select service provider--</option>
<option value="CELLCOM">CELLCOM</option>
<option value="HoTMobile">HoTMobile</option>
<option value="Orange">Orange</option>
<option value="Pelphone">Pelphone</option>
<option value="Golan">Golan</option>
<option value="019">019</option>
</select>
</div>
<div class="select">
<select  id="packet_select" name="packet_chossen" tabindex="3">
<option selected="selected">--Select packet--</option>
</select>
</div>
</fieldset>
<fieldset>
<input placeholder="customer name" type="text" tabindex="4"  
name="customer_name" required >
</fieldset>
<fieldset>
<input placeholder="SIM_SERIAL" type="tel" tabindex="5" name="sim_serial"    
required >
</fieldset>
<fieldset>
<input placeholder="phone_number" type="tel" tabindex="6" name="number"   
required >
</fieldset>
<fieldset>
<label></label>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" tabindex="7" >Add   
Available line</button>
</fieldset>
</form> 
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function getState(val) {
$.ajax({
type: "POST",
url: "dropdown_add_line.php",
data:'sp='+val,
success: function(data){
$("#packet_select").html(data);
}
});
}
</script>
<?php
include 'footer.php';
?>

and this is the dropdown_add_line.php :

<?php
require_once("connectione.php");
$db_handle = new DBController();
if(!empty($_POST["sp"])) {
    $sp=$_POST['sp'];
    $query ="SELECT * FROM packets p WHERE sp  LIKE '%$sp%'";
    $results = $db_handle->runQuery($query);
?>
    <option value="">--Select service provider--</option>
<?php
    foreach($results as $packets) {
?>
    <option value= "<?php echo $packets["id"]; ?>" ><?php echo $packets["packet"]; ?></option>
<?php
    }
}
?>

and the table name is "packets" and the columns is "id","sp","packet"