Question

I am reading a Chrome extension codes. In one of its html files (used for setting), the source code shows that there is a select element like this

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

Note that there is no option element as the child of the select element. However, if I open the setting page of the extension in Chrome, there is a drop-down list corresponding to that select element, and moreover, if I use the Chrome developer tool to inspect this setting page, it shows that the select element has option children:

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

I don’t understand why there is no option child if I view the source code of the setting page in text editor, while the option children appear when I view the page’s DOM using Chrome developer tool. What could be the most possible reason for this? Could some content scripts in the extension change the DOM of the setting page? Also, what’s the benefit to write codes like this?

Thanks!

Answer 1

I do this for an extension at work. I am using Javascript to load extra options in to the select. I do this because the number of options is dynamic. I don’t have source available now but I can post an example later if you would like

Update

Here is an example of some javascript that might populate your select element. I am using jQuery to append the options and to iterate over my list of hosts with jQuery’s each. I have two static options “Default” and “None” the the dynamic list which was generated with 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() ));
    })
}