Jquery 在加载页面之前更新 div 远程页面中的内容

Question

我有一个远程页面 (mypage.html)，该页面中有一个选择器。我想将此页面作为对话框主体加载到我的 bootstrapdialog 中，但我想在加载之前将选项动态添加到选择器。

远程页面（mypage.html）代码：

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

然后我想添加使用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))
     });
});

但是选项还是空的

Answer 1

data 大概只是一个字符串。您正在获取此字符串并创建一组 dom 个元素 $(data) 并操纵这些元素。

然后您将采用相同的字符串并创建一组新的 dom 元素...

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

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

Jquery 在加载页面之前更新 div 远程页面中的内容

Jquery update div content in remote page before loading the page

jquery

bootstrap-dialog