Select box not displaying selected item after Jquery call

Getting some unusual behavior following with displaying a selected item in a select box. I am using bootstrap 3, and when a user clicks on a tab I am using a jquery call to get html to fill this tab. There are approximately 20 select boxes in this html. Here is the javascript code

    $('a[data-toggle="tab"]').on('', function (e) {
        var hash =;
        if (hash === '#tasks') {
            console.log('opened tasks');
            document.getElementById('taskshome').innerHTML = '';
                type: "GET",
                url: "mstab1.php?id=1",
                data: {name: "John"}
            }).done(function (msg) {
                document.getElementById('taskshome').innerHTML = msg;

This is fine and is returning the HTML, I can the the correct HTML in the console log

<select class="taskcompleted" id="c1685825">
    <option value="Not">NotStarted</option>
    <option value="Item note">Note</option>
    <option value="Finished" selected="selected">Finished</option>
    <option value="NA">NA</option>

Sometimes, the select box is showing blank , despite the above HTML. This happens for all the select boxes. This issue is intermittent, and can be reproduced by refreshing the page x number of times, so I find it difficult to reproduce.

Any suggestions please?