直接从javascript设置JSF列表框

Question

我想通过在javascript代码中设置在jsf块中定义的列表框元素，但是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> 

JavaScript代码:

CalendarPopup.handleSelectForMultipleDates = function(type, args, obj, inputEl)
    {
    alert("MultiSelect");
    var arrDates = CalendarPopup.effectiveDateCalendar.getSelectedDates();
    var length = arrDates.length;
    var i=0;
    var tokenizedDates = "";
    var txtDate = document.getElementById("pageForm:effectiveDateListbox");
    alert(txtDate); // returns null
    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);
        effectiveDateListbox.options[i].value = tokenizedDates;
        i++;
    } 

    }

编辑:我能得到列表框，但不能设置它:如何设置列表框?

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++;
        }

Answer 1

不应该返回null:

<select id="pageForm:effectiveDateListbox" name="pageForm:effectiveDateListbox" multiple="multiple" size="0"></select>
document.getElementById('pageForm:effectiveDateListbox');

如果是，则可能是在javascript运行时select元素不存在。为了防止这种情况，你可以尝试:

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