jquery did not send post data

Question

iam trying to control a dropdown select with previous dropdown select. the content of second dropdown select depend on what we select from first dropdown select. iam using ajax to call another php script to change the content of second dropdown select

my code is

<div class="qst"><h4>PILIHAN 1</h4></div>
<div>
    <select id="ptn1" class="font" name="ptn1" style="width: 200px;">
         <?php echo $opt_ptn; ?>
    </select>
</div>
<div>
    <select id="prodi1" name="prodi1" class="font">
         <option value="">-Pilih Kota Terlebih Dulu-</option>
    </select>
</div>

and the jquery file is

$(document).ready(function(){
    $('#ptn1').on('change', function(){
        var ptn1_ID = $(this).val();
        if(ptn1_ID){
            $.ajax({
               type:'POST',
               url:'queryptn.php',
               data:'ptn1='+ptn1_ID,
               success:function(html){
                   $('#prodi1').html(html);
               }
           }); 
       }else{
           $('#prodi1').html('<option value="">-Pilih Terlebih  Dulu-</option>');
       }
    }); 
});

and my php script is

<?php
//Include database configuration file
include "include/dbconnect.inc"; 

if(isset($_POST["ptn1"]) && !empty($_POST["ptn1"])){
    $kodeptn = $_POST["ptn1"];
    $sql = "SELECT * FROM t_dataprodi WHERE c_kodeptn = '$kodeptn'";
    $result = mysqli_query($conn, $sql);
    $rowCount = mysqli_num_rows($result);
    if($rowCount > 0) {
        echo '<option value="">-Pilih Prodi-</option>';
        while($row = mysqli_fetch_assoc($result)) {
            echo "<option value='".$row['c_kodeprodi']."'>".$row['c_namaprodi']."</option>";
        }
    } else {
        echo '<option value="">'.$kodeptn.'</option>';        
    }
}
?>

please tell where is my mistake, the code isn't working

Thanks