Question

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

但是第二次下拉列表中没有插入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文件如下所示
enter image description here

Answer 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>";
}
?>

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

为什么不将ajax响应附加到下拉列表？

1 个答案: