Jquery update div content in remote page before loading the page

I have a remote page (mypage.html) with a selector in this page. I want to load this page to my bootstrapdialog as the dialog body, but I want to add options dynamically to the selector before loading.

remote page (mypage.html) code:

<form>
  <select id="zoneSelectPicker" class="form-control"
                name="availabilityZone" style="height: 3.0em;">
   </select>
</form>

Then I want to add using jquery

$.get('mypage.html', function(data) {
                $(data).find('#zoneSelectPicker')
                .append(
                    '<option value="us-east-1a">us-east-1a</option');
     BootstrapDialog.show({
        message: $('<div></div>').append($(data))
     });
});

But the options is still empty.

data is presumably just a string. You are taking this string and creating a set of dom elements $(data) and manipulating the elements.

You are then taking the same string and creating a new set of dom elements...

var elements = $(data);
elements.find('#zoneSelectPicker').append('<option value="us-east-1a">us-east-1a</option>');

BootstrapDialog.show({
    message: $('<div></div>').append(elements)
});