AJAX 调用只调用一个下拉列表的数据，而不是两个下拉列表

Question

我是新手，还在学习 AJAX 调用，我不明白为什么我的 AJAX 调用只调用一个下拉列表的数据。好的，场景是我的表单中有 3 个下拉列表，分别是选择医生、显示咨询费和提供预约日期列表。我面临的问题是，当在 中选择医生时doctor dropdown list，AJAX 调用只会加载appointment date dropdown list. 它没有收取咨询费。

这是我的医生代码、咨询费和预约日期下拉列表：

<div>

  <label>Select Doctor</label>

  <select name="doctor" id="get_doctor_name" onchange="getfee()" autocomplete="off" required>

    <option hidden value="">Select Doctor</option>

  </select>

</div>

<div>

  <label>Consultation Fee</label>

  <select name="fees" id="get_doctor_fee" autocomplete="off" readonly>

  </select>

</div>

<div>

  <label>Appointment Date</label>

  <select name="appdate" id="get_date">

  </select>

</div>

更新：这里是 AJAX 调用的脚本，函数getfee()和getdate()：

<script>

      //function for fee details

      function getfee() 

      {

        $("#loaderIcon").show();

        jQuery.ajax(

        {

          url: "getfee.php",

          data: {doctor : $("#get_doctor_name").val()},

          type: "POST",

          success: function(data) 

          {

            $("#get_doctor_fee").html(data);

            $("#loaderIcon").hide();

          },

          error: function() {}

        });

      }

      //function for appointment date details

       function getdate() {

       $("#loaderIcon").show();

       jQuery.ajax({

       url: "getslot-date.php",

       data: {doctor : $("#get_doctor_name").val()},

       type: "POST",

       success: function(data) {

         $("#get_date").html(data);

        $("#loaderIcon").hide();

       },

       error: function() {}

    });

 }

    </script>

Answer 1

您应该将数据作为 json 返回，然后使用它$results=$query->fetchAll(PDO::FETCH_OBJ);// remove all code after it, and add the following lineecho json_encode($results);在你的 ajax 渲染选项中像这样function getfee()&nbsp;&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; $.ajax(&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "getfee.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {doctor : $("#get_doctor_name").val()},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; beforeSend: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //start loader&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#loaderIcon").show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function() {&nbsp; // hide loader when error otherwise will stuck on your screen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#loaderIcon").hide();}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(objJson)&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var data = $.parseJSON(objJson);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data); // to view how it looks in console, array, empty or whatever&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#get_doctor_fee').empty();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(data.length > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.each(data, function(key, value) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#get_doctor_fee').append('<option value="'+ value.D_FEES+'">'+ value.D_FEES +'</option>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#get_doctor_fee').append('<option value="">No Doctor in this specilization </option>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#submit').prop('disabled',true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#loaderIcon").hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }您可以对其他下拉菜单应用相同的调整，它只是一个示例，向您展示如何管理它。您可以更改的另一件事是调用您的函数，这样函数可以更可定制并具有更多控制权。但这取决于您的喜好$('#get_doctor_name').on('change', function() {&nbsp; &nbsp; // call your ajax here&nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; url: "getfee.php",&nbsp; &nbsp; &nbsp; data: {doctor : $(this).val()},&nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; // update get_doctor_fee here})$('#get_doctor_fee').on('change', function() {&nbsp; &nbsp; // call your ajax here&nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; url: "getslot-date.php",&nbsp; &nbsp; &nbsp; data: {doctor : $(this).val()},&nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; ...&nbsp;&nbsp; &nbsp; &nbsp; // update get_date dropdown})

Answer 2

你必须像这样写数据function getfee() {&nbsp; &nbsp; &nbsp; &nbsp;$("#loaderIcon").show();&nbsp; &nbsp; &nbsp; &nbsp;jQuery.ajax({&nbsp; &nbsp; &nbsp; &nbsp;url: "getslot-date.php",&nbsp; &nbsp; &nbsp; &nbsp;data: {doctor : $("#get_doctor_name").val()},&nbsp; &nbsp; &nbsp; &nbsp;type: "POST",&nbsp; &nbsp; &nbsp; &nbsp;success: function(data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#get_date").html(data);&nbsp; &nbsp; &nbsp; &nbsp; $("#loaderIcon").hide();&nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp;error: function() {}&nbsp; &nbsp; });&nbsp;}