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

I have a dropdown which contains data retrieved from a table. There is another dropdown which has some dynamic options. It means when a user selects a one option from the first dropdown. Only the matching options will be loaded into second dropdown from the same table. Everything works as I expected and the ouput is printed in the console properly (developers' tool).

But ajax response is not inserted into the second dropdown.

I went through similar questions in this forum, but nothing could help me to make it work. I did these changes too Changed dataType in Ajax to html. Used append instead of html.

Even though I did above changes second dropdown is still empty. Surprisingly correct input is printed in the console.

What is printed in the console

<option value='10046'>ABC</option><option value='10048'>Nuwan</option>

When I inspect the console carefully I could see something like this

""          create_loan_request:169

Line 169 is console.log(html)

Below is my code and I am really grateful anyone to who could help me to find where the bug is.

First drop down

<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>

Second dropdown (will change dynamically)

 <div class="formBlock">
                    <label for="cust_id">Customer Name <span class="required">*</span></label>
                    <select id="cust_id"  ></select>

                </div>

Script

 $(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 code

<?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 The whole html file is displayed as shown below
enter image description here

Try putting your jquery code in

$(document).ready(function(){

});

I check your code, without its database codes and it worked for me. I put my code here.

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>

and server.php that works as the file for ajax call :

<?php
if(isset($_GET["branch_id"])){
      echo "<option value='4'>a7</option>";
}
?>

You can check your db-related codes too. Hope it can help :)