直接从javascript设置JSF列表框

我想通过在javascript代码中设置来直接设置jsf块中定义的listbox元素，但是document.getElementById（）返回null

JSF代码：

<h:panelGroup id="dtEffectiveDate">
                                <h:outputText value="EffectiveDates:" style="margin-left: 250px;width:76px;"/>
                                    <h:selectManyListbox id="effectiveDateListbox" style="margin-left: 15px; width:76px;" size="2">
                                        <c:selectItems id="effectiveDateSelectItems" value="#{manualDataEntryRegText.effectiveDates}"/>
                                    </h:selectManyListbox>
                                </h:panelGroup> 

编辑：我可以获取列表框，但无法设置它： 如何设置列表框

var listBox = document.getElementById('pageForm:effectiveDateListbox');
        for (i = 0; i!= length; i++) 
        {
            var date = arrDates[i];
            var displayMonth = date.getMonth() + 1;
            var displayYear = date.getFullYear();
            var displayDate = date.getDate();
            tokenizedDates = displayMonth.toString(10) + "/" + displayDate.toString(10) + "/" + displayYear.toString(10);
            listBox.options[i].value = tokenizedDates;
            i++;
        }

---

这不应返回

null

：

<select id="pageForm:effectiveDateListbox" name="pageForm:effectiveDateListbox" multiple="multiple" size="0"></select>

document.getElementById('pageForm:effectiveDateListbox');

---

这是查看JSF呈现的HTML源代码时元素的

id

吗？这是我看到的这是我现在看到的：

<select id="pageForm:effectiveDateListbox" name="pageForm:effectiveDateListbox" multiple="multiple" size="0"></select>

document.getElementById('pageForm:effectiveDateListbox');

window.onload = function(){
    // do stuff here
};