Chrome擴展程序的奇怪設置/選項頁面

Question

我在閱讀Chrome擴展程序代碼。在它的HTML文件（用於設置）之一，源代碼顯示，有這樣的

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

注意，沒有option元素作爲select元素的孩子select元素。但是，如果我在Chrome中打開擴展程序的設置頁面，則會出現與該select元素對應的下拉列表，此外，如果使用Chrome開發人員工具檢查此設置頁面，則會顯示select元素具有option兒：

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

我不明白爲什麼沒有option的孩子，如果我認爲在文本編輯器中設置頁面的源代碼，而當我使用Chrome開發者工具查看頁面的DOM的option孩子出現。這可能是最可能的原因是什麼？擴展程序中的某些內容腳本是否可以更改設置頁面的DOM？另外，編寫這樣的代碼有什麼好處？

謝謝！

Answer 1

我這樣做是爲了延長工作。我正在使用Javascript來加載額外的選項到選擇。我這樣做是因爲選項的數量是動態的。我沒有可用的源，但現在我可以張貼一個例子以後，如果你想

更新

下面是一些JavaScript可能會填充您select元素的例子。我使用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())); 
    }) 
}