我有一个下拉列表,其中包含从表中检索到的数据。还有另一个下拉列表,它有一些动态选项。这意味着当用户从第一个下拉列表中选择一个选项时。只有匹配选项才会从同一个表中加载到第二个下拉列表中。一切都按预期工作,输出正确地打印在控制台中(开发人员工具)。
但是第二次下拉列表中没有插入ajax响应。
我在这个论坛上遇到了类似的问题,但没有任何东西可以帮助我让它发挥作用。 我也做了这些改变 将Ajax中的dataType更改为html。 使用append而不是html。
即使我做了以上更改,第二次下拉仍然是空的。令人惊讶的是,正确的输入打印在控制台中。
控制台中打印的内容
<option value='10046'>ABC</option><option value='10048'>Nuwan</option>
当我仔细检查控制台时,我可以看到类似这样的东西
"" create_loan_request:169
第169行是console.log(html)
以下是我的代码,我真的很感谢能帮我找到错误的人。
首先下拉
<div class="formBlock">
<label for="branch_id">Branch Name<span class="required">*</span></label>
<select id="branch_id" name="branch_id" class="textInput">
<?php
$branches = $branch->find_by_sql("SELECT * FROM branch");//this is an arry
foreach ($branches as $branch) {
echo "<option value='$branch->id'>$branch->branch_name</option> ";
}
?>
</select>
</div>
第二次下拉(会动态更改)
<div class="formBlock">
<label for="cust_id">Customer Name <span class="required">*</span></label>
<select id="cust_id" ></select>
</div>
脚本
$(function(){
$("#branch_id").bind("change",function(){
$.ajax({
type:"GET",
url:"create_loan_request.php", //same file
data:"branch_id="+$("#branch_id").val(),
dataType:"text", //changed this to html also
success:function(html){
$("#cust_id").html(html); // I have tried append also
console.log(html);
//inserting options to second dropdown
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
PHP代码
<?php
//php code to populate customer dropdown based on branch
if(isset($_GET["branch_id"])){
$id=(int)$_GET["branch_id"];
$customers= Customer::find_by_sql("SELECT id,firstname,lastname FROM customer WHERE branch_id=".$id);
foreach ($customers as $customer) {
echo "<option value='$customer->id'>".$customer->firstname."</option>";
}
}
?>
P:S整个html文件如下所示
答案 0 :(得分:1)
尝试将您的jquery代码放入
$(document).ready(function(){
});
我检查你的代码,没有它的数据库代码,它对我有用。我把我的代码放在这里。
Test.php:
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#branch_id").bind("change",function(){
$.ajax({
type:"GET",
url:"server.php",
data:"branch_id="+$("#branch_id").val(),
dataType:"text",
success:function(html){
$("#cust_id").html(html);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
});
</script>
<div class="formBlock">
<label for="branch_id">Branch Name<span class="required">*</span></label>
<select id="branch_id" name="branch_id" class="textInput">
<option value='1'>a1</option>
<option value='2'>a2</option>
<option value='3'>a3</option>
</select>
</div>
<div class="formBlock">
<label for="cust_id">Customer Name <span class="required">*</span></label>
<select id="cust_id" ></select>
</div>
</body>
和 server.php ,用作ajax调用的文件:
<?php
if(isset($_GET["branch_id"])){
echo "<option value='4'>a7</option>";
}
?>
您也可以检查与数据库相关的代码。 希望它可以帮助:))