使用Ajax和PHP的动态相关选择框在实体化js中不起作用

Question

在我的应用程序中，我使用Dynamic Dependent Select Box、Ajax和PHP。我的网站模板是使用materialize js构建的。在我的控制台中，它成功地在我的应用程序中的Doctor Name上接收到values，但没有加载到doctor name select box中。去除CCD_ 8和CCD_。

这是代码：

<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动态添加的选择将需要初始化

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

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