为什么没有将 ajax 响应附加到下拉列表中？答案

【问题标题】：Why is not ajax response appended to dropdown?为什么没有将 ajax 响应附加到下拉列表中？
【发布时间】：2014-04-29 11:03:53
【问题描述】：

我有一个下拉列表，其中包含从表中检索到的数据。还有另一个下拉菜单，其中包含一些动态选项。这意味着当用户从第一个下拉列表中选择一个选项时。只有匹配的选项才会从同一个表中加载到第二个下拉列表中。一切都按我的预期工作，并且输出正确打印在控制台中（开发人员工具）。

但是 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文件显示如下图

【问题讨论】：

你检查 $("#cust_id").innerHTML=html 了吗？
试试 $("#cust_id").append(html);
@Anoop - 我试过了。尝试了很多。我在我的问题中提到了它
@Alireza - 当我使用 innerHTML 时，它说它不是一个函数。我认为这是因为它不是 jQuery 函数，而是 javascript 函数
在成功函数 alert(html) 中添加警报。看看是不是字符串

标签： php jquery mysql ajax

【解决方案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>";
}
?>

您也可以检查与数据库相关的代码。希望它可以帮助:)

【讨论】：