dropdown value is not getting selected ajax html() response - php

Question

I have written a dependable dropdown and its first get the id from the first dropdown and set the div id of the second drop down through ajax call. The issue is when I try to do with html() the second drop down first value can not be selected.
Here is the image of the dependable dropdown
Here is the code I am trying:
<div class="modal fade" id="addNewFloor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
<div class="modal-dialog" role="document" style="">
<div class="modal-content">
<?php echo form_open('registrations/saveNewFloor'); ?>
<?php if (isset($message)) { ?>
<CENTER><h3 style="color:green;">Data inserted successfully</h3></CENTER><br>
<?php } ?>
<div class="modal-header">
<img src="assets/backend/img/floor.png" style="widows:50px;height:50px">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel">Register New Floor</h4>
</div>
<hr class="colorgraph">
<div id="floorModelBox"></div>
<div class="modal-body" style="margin-bottom:2px;padding-top:1px">
<table class="table table-condensed" style="background-color:#F5F5F5;margin-bottom:1px">
<caption><h3><small>Floor Path</small><h3></caption>
<!------- Select Branch --------------------->
<tr><td>Select Branch</td><td >
<select class="form-control" name="branchId_floorModel1" id="branchId_floorModel" onChange="return selectBuildings_floorModel(this.value);selectBuildings_floorModel323();clearFloors();clearSections();clearIots();clearGateways();myFunction();" >
<option value="0" selected> -- select Branch --</option>
<?php
foreach($groups as $row)
{
echo '<option value="'.$row->branchId.'">'.$row->branchName.'</option>';
}
?>
</select></td></tr>
<tr><td>Select Building</td><td>
<select class="form-control" name="buildingBox_floorModel1" style="width:100%;" id="buildingBox_floorModel" required>
<option selected ="selected" value="0">select Building</option></select>
</td></tr>
</table>
<hr/>
<table class="table table-condensed" style="margin-top:2px;margin-bottom:1px">
<caption><h3><small>Floor Details </small><h3></caption>
<tr><td>Floor Name :</td><td > <input type="text" class="form-control input-sm" name="floorName_FloorModel" id="floorName_FloorModel" /></td></tr>
<tr><td>Floor No : </td><td><input type="text" class="form-control input-sm" placeholder="building no" name="floorNo_FloorModel" id="floorNo_FloorModel" /></td></tr>
</table>
</div>
<div class="modal-footer" style="margin-bottom:2px;padding-top:1px">
<hr class="colorgraph">
<button type="button" class="btn btn-primary " data-dismiss="modal" onClick="window.location.reload();">CLOSE</button>
<?php echo form_submit(array( 'class'=>'btn btn-success ', 'id' => 'submit', 'value' => 'Submit')); ?>
<?php echo form_close(); ?><br/>
<div id="fugo">
</div>
</div>
</div>
</div>
</div>
function selectBuildings_floorModel(branchId) {
$.ajax({
url: '<?php echo base_url();?>registrations/get_building_section/' + branchId ,
success: function (response)
{
jQuery('#buildingBox_floorModel').html(response);
}
});
}
//controller method
function get_building_section($branchId)
{
$this->MBuilding->get_building_by_branch($branchId);
$sections = $this->db->get_where('building' , array(
'branchId' => $branchId
))->result_array();
// print_r($sections);die;
foreach ($sections as $row) {
//echo $row['buildingName'];
//
echo '<option value="' . $row['buildingId'] . '">' . $row['buildingName'] . '</option>';
}
}
I even tried with the append() method, but then it's not clearing the dropdown list value.

Answer 1

Try Following...
$("#branchId_floorModel").change(function (){
// Your Code....
});