PHP Populate dropdown with ajax onchange issue IE Only

Question

I'm having a heck of a time with this issue. I'm simply trying to populate a second dropdown based on the choice of the first using jquery ajax. It works great in every other browser, including Edge, just not IE 11.

Here's the ajax function

    function getProfiles(val) {
   $.ajax({
     cache: false,
     type: 'POST',
     url: 'ajaxDept.php?dept=' + val,
     data: {
       get_option:val
     },
     success: function (response) {
       document.getElementById("comboprofile").innerHTML=response; 
     }

   });
}

This is the ajaxDept.php code

<?php
include('/inc/config.inc.php');

$dbAjax = new Database();
$dbAjax->connect();
$dbAjax->selectDB('cad');
$dept = $_GET['dept'];

$queryAjax = $dbAjax->SelectQuery("SELECT * FROM profile WHERE department='".$dept."' ORDER BY profile_prefix ASC");
foreach($queryAjax as $line)
{
    $prefix = $line['profile_prefix'];
    $profile = $prefix."-".$line['profile_name'];
    $department = $line['department'];
    echo "<option value='".$prefix."'>".$profile."</option>";
}
?>

And the HTML portion

  <label class="description" for="comboDept">Department</label>
  <div>
    <select class="element select medium" id="comboDept" name="comboDept" onchange="getProfiles(this.value);">
      <option value="" selected="selected"></option>
      <?php echo $comboDept; ?>
    </select>
  </div>
</li>
<li id="li_13">
  <label class="description" for="comboprofile">Profile</label>
  <div>
    <select class="element select medium" id="comboprofile" name="comboprofile">

    </select>
  </div>
</li>

I've run through the debugger with IE 11 and I'm getting a 200/OK

This is the request URL as IE sees it, which is correct

Request URL: http://php/CAD/new/ajaxDept.php?dept=IT

When I browse to that url in IE, and view source, it's showing me the correct html code with the <option> tags. It's simply not populating my dropdown.

Again, works perfectly well in every other browser I've tried, so I'm not sure this is actually a jQuery/Ajax issue or something with how IE is handling the HTML response. Any help would be greatly appreciated.

Answer 1

Thanks Mikey, that was the fix.

$('#comboprofile').html(response);

This was the final working function

function getProfiles(val) {
   $.ajax({
     cache: false,
     type: 'POST',
     url: 'ajaxDept.php?dept=' + val,
     data: {
       get_option:val
     },
     success: function (response) {
       $('#comboprofile').html(response); 
     }

   });
} 

Answer 2

It might be because of this line according to this post:

document.getElementById("comboprofile").innerHTML=response;

Since you are using jQuery, you might as well keep using it by replacing that line with:

$('#comboprofile').html(response);