1

我正在阅读 Chrome 扩展代码。在它的一个html文件中（用来设置），源码显示有这样一个select元素

<select id="hostselect"></select>

请注意，没有option元素作为元素的子select元素。但是，如果我在 Chrome 中打开扩展程序的设置页面，有一个与该元素对应的下拉列表select，而且，如果我使用 Chrome 开发人员工具查看此设置页面，它会显示该select元素有option子元素：

<select id="hostselect">
  <option value="host1">host1</option>
  <option value="hots2">host2</option>
</select>

option如果我在文本编辑器中查看设置页面的源代码，我不明白为什么没有子项，而option当我使用 Chrome 开发人员工具查看页面的 DOM 时出现子项。最可能的原因是什么？扩展中的一些内容脚本会改变设置页面的 DOM 吗？另外，写这样的代码有什么好处？

谢谢！

4

1 回答 1

1

我这样做是为了延长工作时间。我正在使用 Javascript 将额外的选项加载到选择中。我这样做是因为选项的数量是动态的。我现在没有可用的资源，但如果您愿意，我可以稍后发布一个示例

更新

下面是一些可能会填充您的select元素的 javascript 示例。我正在使用 jQuery 附加选项并使用 jQuery 的each. 我有两个静态选项“默认”和“无”生成的动态列表getHosts()

var hosts = getHosts();
if(hosts) {
    var selectElement = $("#hostSelect");
    selectElement.append($("<option></option>").attr("value", "0").text("-- Default Host --"));
    selectElement.append($("<option></option>").attr("value", "-1").text("-- No Host Selected --"));
    $.each(hosts, function(key, host) {
        selectElement.append($("<option></option>").attr( "value", host.getHostID() ).text( host.getName() ));
    })
}
于 2012-07-07T02:25:25.093 回答