jquery - 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)
});