Dependent dropdown - php

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"