使用 Ajax 和 PHP 的動態依賴選擇框在 Materialize js 中不起作用

Question

在我的應用程序中，我使用Ajax和PHP使用Dynamic Dependent Select Box 。 我的網站模板是使用materialize js構建的。 在我的控制台中，它成功接收了我的應用程序中Doctor Name上的values ，但沒有加載到doctor name select box 。 通過刪除materialize js和materialize css它可以正常工作。

這是代碼：

         <form class="form-horizontal" method="POST" id="form_apt">
         <center>   <h2>Request an Appointment</h2>  </center>  <br><br>                    
                <div class="form-group">
                    <label class="control-label col-sm-3">Doctor Specilization:</label>
                    <div class="col-sm-9">

                    <?php
        function load(){ 
           include('phpquery/dbconnection.php');
            $output='';
            $sql="SELECT * from doctorspecilization";
            $result=mysqli_query($con,$sql);
            while($row=mysqli_fetch_array($result)){
     $output.='<option value="'.$row["specilization"].'">'.$row["specilization"].'</option>';
          }
              return $output;
             }
        ?>

            <select name="doctorspecilization" id="doctorspecilization">
            <option value="">Select Specilization</option> 
             <?php echo load();   ?>

                  </select>
                  <span id="doctorspecilization-info" class="info text-danger"></span><br />

                    </div>
                </div> 


                <div class="form-group">
                    <label class="control-label col-sm-3">Doctor :</label>
                    <div class="col-sm-9" class="select">
                        <select name="doctorname" id="doctorname">
                    <option value="">Select Doctor</option>                                     
                  </select>
                    </div>
                </div> 


                <div class="form-group">
                    <label class="control-label col-sm-3">Appointment Date:</label>
                    <div class="col-sm-9">
                        <input type="date" id="date" name="date" class="form-control" 
                        placeholder="Enter your education">
                        <span id="date-info" class="info text-danger"></span><br />
                    </div>


                </div>

                <div class="form-group mar-bot-0">
                    <div class="col-sm-offset-3 col-sm-9">
                        <i class="waves-effect waves-light light-btn waves-input-wrapper" style=""><input type="button" value="APPLY NOW" id="apply" name="apply" class="waves-button-input"></i>
                    </div>
                </div><br>
                <center>  <div id="success_mes" class="text text-success">    </div>  </center> <br>

            </form>

這是Ajax ：

<script>


        //    start query
 $(document).ready(function () {

 $('#doctorspecilization').change(function () {

var doc_spec_id=$(this).val();

$.ajax({
            url: "phpquery/fetch_doctor_name.php", // Url to which the request is send
            method: "POST",             // Type of request to be send, called as method
            data: {doc_spec_id:doc_spec_id  },
            dataType:"text",

            success: function (data) {
                $("#doctorname").html(data);

            }

        });


    });
</script>

我不知道我哪里錯了。 任何幫助都可能受到高度贊賞。

Answer 1

#1 物化選擇需要初始化

我在您的代碼中看不到任何初始化。

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('select').formSelect();
  });

#2 Select 動態添加需要初始化

success: function (data) {
                $("#doctorname").html(data);
                $('select').formSelect();

         }

https://materializecss.com/select.html#initialization