javascript - 从属下拉列表未在选择第一个下拉列表时加载

Question

我有两个下拉菜单。我正在使用 Jquery 加载第二个下拉列表。没有 jqyery 我的 php 代码工作正常。但是当我使用 jquery 时，第二个下拉菜单在选择第一个下拉菜单时变为空。

第一个下拉列表(教育)

$sqleducation = "select * from education order by education_id asc ";
$reseducation = mysqli_query($conn,$sqleducation);

<select name="education" id="education">
<option value="-1">Please Select</option>
<?php while($roweducation=mysqli_fetch_array($reseducation)){ ?>
<option value="<?php echo $roweducation['education_id']?>">
<?php echo $roweducation['education_name']?>
 </option>
<?php }?>
</select>

第二个下拉(度数)

<select name="degree" id="degree" >
<option value="-1">Please Select</option>

 <?php if(isset($_POST["education_id"]) && !empty($_POST["education_id"])){

$sqldegree = "SELECT * FROM degree WHERE education_id = ".$_POST['education_id']." ";
 $resdegree = mysqli_query($conn,$sqldegree);
while($rowdegree=mysqli_fetch_array($resdegree))
    { ?>

              <option value="<?php echo $rowdegree['degree_id']?>">
              <?php echo $rowdegree['degree_name']?>
              </option>
           <?php } }?>
  </select>

第二个下拉列表使用 juery 加载第一个下拉列表教育的选择。

<script src="https://code.jquery.com/jquery-3.2.1.min.js"
 integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

 <script type="text/javascript">
  $(document).ready(function(){
   $('#education').on('change',function(){
    var educationID = $(this).val();
    if(educationID){
        $.ajax({
            type:'POST',
            url:'education-career.php',
            data:'education_id='+educationID,
            success:function(html){
                $('#degree').html(html);

            }
        }); 
    }else{
        $('#degree').html('<option value="">Select Education first</option>');

    }
});});</script>

Answer 1

尝试改变下面的行

data:'education_id='+educationID,

到

data:{education_id : educationID},