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},

Answer 2

试试这个。（第二个选择标记必须放在第一页才能使用$('#degree').html(...)）

首次下拉

$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>
</select>

第二次下拉

<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 } }?>

Answer 3

在ajax中，您正在使用

data:'education_id='+educationID,

用于发布数据。变量名称将在education_id。

在你的第二页中，你试图得到：

isset($_POST["education"])

这只是。因此，在第二页上，您必须将education替换为education_id。

Answer 4

变化：

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

要：

$('select#education').change(function(){

在选择第一个下拉列表时未加载依赖下拉列表

4 个答案: