如何在 javascript 中从 <h:selectOneMenu> 获取所选项目答案

【问题标题】：How to get selected item from <h:selectOneMenu> in javascript如何在 javascript 中从 <h:selectOneMenu> 获取所选项目
【发布时间】：2012-11-14 14:15:14
【问题描述】：

我正在尝试从我的 selectOneMenu onchange 中获取所选项目，但它不起作用。每次我更改下拉菜单并选择另一个选项时，我的网络浏览器上的控制台都会显示

属性“getOffset”的值为 null 或未定义，不是 Function 对象

这是我的 .xhtml 页面，名为 ProgramDetails.xhtml

<h:dataTable id="DispatchConfigurationCustom" columnClasses="portlet-table-same portlet-table-cell" headerClass="portlet-table-same portlet-table-cell" value="#{CRUDOperatorProgram.workflowStepList}" var="workflowConfig" width="100%">
<h:column>
    <f:facet name="header">
        <h:outputText value="Include" />
    </f:facet>
    <h:selectBooleanCheckbox id="includeInd" value="#{workflowConfig.isIncludedInd}"/>
</h:column>
<h:column>
    <f:facet name="header">
        <h:outputText value="Automate" />
    </f:facet>
    <h:selectOneRadio id="onOff" value="#{workflowConfig.isAutomatedInd}">
        <f:selectItem id="onButton" itemLabel="On" itemValue="1" />
        <f:selectItem id="offButton" itemLabel="Off" itemValue="0" />
    </h:selectOneRadio>
</h:column>
<h:column>
    <f:facet name="header">
        <h:outputText value="Action Step" />
    </f:facet>
    <h:outputText value="#{workflowConfig.workflowStep.displayLabel}" />
</h:column>
<h:column>
    <f:facet name="header">
        <h:outputText value="Offset Prior" />
    </f:facet>
    <label for="offsetPriorBoxHour"><h:outputText value="hrs:" rendered="#{workflowConfig.workflowStep.displayLabel == 'Curtail Notification'}" /></label>
    <h:selectOneMenu styleClass="portlet-dropdown"  rendered="#{workflowConfig.workflowStep.displayLabel == 'Curtail Notification'}"  id="offsetPriorBoxHour" value="#{workflowConfig.offsetMinutes}" onchange="getOffset(this);">
        <f:selectItems value="${CRUDOperatorProgram.hourList}" />
    </h:selectOneMenu>
    <label for="offsetPriorBoxMin"><h:outputText value="min:" rendered="#{workflowConfig.workflowStep.displayLabel == 'Curtail Notification' or workflowConfig.workflowStep.displayLabel == 'Multisite Follow Up' or workflowConfig.workflowStep.displayLabel == 'Curtail Toggle'}" /></label>
    <h:selectOneMenu styleClass="portlet-dropdown"  rendered="#{workflowConfig.workflowStep.displayLabel == 'Curtail Notification' or workflowConfig.workflowStep.displayLabel == 'Multisite Follow Up' or workflowConfig.workflowStep.displayLabel == 'Curtail Toggle'}"  id="offsetPriorBoxMin" value="#{workflowConfig.offsetMinutes}" onchange="getOffset(this);">
        <f:selectItems value="${CRUDOperatorProgram.minuteList}" />
    </h:selectOneMenu>
</h:column>
<h:column>
    <f:facet name="header">
        <h:outputText value="Offset After" />
    </f:facet>
    <label for="offsetAfterBoxMin"><h:outputText value="min:" rendered="#{workflowConfig.workflowStep.displayLabel == 'Restore Notification' or workflowConfig.workflowStep.displayLabel == 'Overlapping Follow Up' or workflowConfig.workflowStep.displayLabel == 'Restore'}" /></label>
    <h:selectOneMenu styleClass="portlet-dropdown"  rendered="#{workflowConfig.workflowStep.displayLabel == 'Restore Notification' or workflowConfig.workflowStep.displayLabel == 'Overlapping Follow Up' or workflowConfig.workflowStep.displayLabel == 'Restore'}"  id="offsetAfterBoxMin" value="#{workflowConfig.offsetMinutes}" onchange="getOffset(this);">
        <f:selectItems value="${CRUDOperatorProgram.minuteList}" />
    </h:selectOneMenu>
</h:column>
<h:column>
    <f:facet name="header">
        <h:outputText value="Offset Target" />
    </f:facet>
    <h:outputText rendered="#{workflowConfig.workflowStep.displayLabel == 'Curtail Notification' or workflowConfig.workflowStep.displayLabel == 'Multisite Follow Up' or workflowConfig.workflowStep.displayLabel == 'Curtail Toggle'}"  id="offsetTargetStartBox" value="Start" />
    <h:outputText rendered="#{workflowConfig.workflowStep.displayLabel == 'Restore Notification' or workflowConfig.workflowStep.displayLabel == 'Overlapping Follow Up' or workflowConfig.workflowStep.displayLabel == 'Restore'}"  id="offsetTargetEndBox" value="End" />
</h:column>
<h:column>
    <f:facet name="header">
        <h:outputText value="Offset Summary" />
    </f:facet>
    <h:outputText rendered="#{workflowConfig.workflowStep.displayLabel == 'Curtail Notification' or workflowConfig.workflowStep.displayLabel == 'Multisite Follow Up' or workflowConfig.workflowStep.displayLabel == 'Curtail Toggle'}"  id="offsetSummaryBeforeBox" value="before Start time" />
    <h:outputText rendered="#{workflowConfig.workflowStep.displayLabel == 'Restore Notification' or workflowConfig.workflowStep.displayLabel == 'Overlapping Follow Up' or workflowConfig.workflowStep.displayLabel == 'Restore'}"  id="offsetSummaryAfterBox" value="after End time" />
</h:column>
<script>
    function getOffset( dropdown ) {
        var minutesTemp = dropdown.options[dropdown.selectedIndex].value;
        var minutes = minutesTemp.toString();
        alert("Minutes: " + minutes);
    // <![CDATA[
        if(document.getElementById('ProgramDetails:DispatchConfigurationCustom:0:offsetPriorBoxHour') != null) {
            var hourBox = document.getElementById('ProgramDetails:DispatchConfigurationCustom:0:offsetPriorBoxHour');
            var hourTemp = hourBox.options[hourBox.selectedIndex].value;
            var hour = hourTemp.toString();
            document.getElementById('ProgramDetails:DispatchConfigurationCustom:0:offsetSummaryBeforeBox').value = hours + " hours and " + minutes + " minutes before Start time";
        } else if(document.getElementById('ProgramDetails:DispatchConfigurationCustom:0:offsetSummaryBeforeBox') != null) {
            document.getElementById('ProgramDetails:DispatchConfigurationCustom:0:offsetSummaryBeforeBox').value = minutes + " minutes before Start time";
        } else { 
            document.getElementById('ProgramDetails:DispatchConfigurationCustom:0:offsetSummaryAfterBox').value = minutes + " minutes before Start time";
        }
        //]]>
    }

</script>
</h:dataTable>

这些是填充 selectOneMenu 的 hourList 和 minuteList 方法...

private void loadMinuteList() {
    minuteList = new ArrayList<SelectItem>();
    for(Integer i=0; i<=60; i++){
        minuteList.add(new SelectItem(i, i.toString()));
    }
}

private void loadHourList() {
    hourList = new ArrayList<SelectItem>();
    for(Integer i=0; i<=30; i++){
        hourList.add(new SelectItem(i, i.toString()));
    }
}

抱歉所有长代码块。我只是想给你我能提供的最多信息。我使用javascript的方式有问题吗？还是 onchange=""？

【问题讨论】：

从实际代码中，很难定义问题可能是什么。如果您分析生成的 HTML 代码（或发布它以查看可能发生的情况）会更好。
@LuiggiMendoza 我查看了生成的 HTML 代码，因为我使用的是 java beans 和 jsf，所以我设置为的 id 在 html 加载时会发生变化。在本例中，offsetSummaryAfterBox 的 id 更改为 ProgramDetails:DispatchConfigurationCustom:0:offsetSummaryAfterBox。这可能不是导致此错误的主要问题。但我确实需要找到一种方法来区分我正在编辑的 offsetSummaryAfterBox。示例：(ProgramDetails:DispatchConfigurationCustom:0:offsetSummaryAfterBox) 与 (ProgramDetails:DispatchConfigurationCustom:1:offsetSummaryAfterBox)
@LuiggiMendoza 如果您想了解更多信息，我很乐意带您进行聊天或其他资源。非常感谢

标签： javascript jsf selectonemenu

【解决方案1】：

您的脚本中有 2 个问题：

var minutesTemp = dropdown.options[dropdown.selectedIndex].value.;

去掉末尾额外的.

和

else (document.getElementById('ProgramDetails:DispatchConfigurationCustom:0:offsetSummaryBeforeBox') != null) {
   document.getElementById('ProgramDetails:DispatchConfigurationCustom:0:offsetSummaryBeforeBox').value = minutes + " minutes before Start time";
}

应该是

else if (document.getElementById('ProgramDetails:DispatchConfigurationCustom:0:offsetSummaryBeforeBox') != null) {
   document.getElementById('ProgramDetails:DispatchConfigurationCustom:0:offsetSummaryBeforeBox').value = minutes + " minutes before Start time";
}

即在else 之后添加if - 使用else 时不能检查条件，除非你也包括if

【讨论】：

谢谢。我删除了“。”但仍然得到同样的错误。我确实有一个 else if 以及许多其他检查，但我将它们取出以使代码更小。还有其他想法吗？有没有办法让我区分 'ProgramDetails:DispatchConfigurationCustom:0:offsetSummaryBeforeBox' 和 'ProgramDetails:DispatchConfigurationCustom:1:offsetSummaryBeforeBox' ？
@Zack 如果您有其他代码，请在您的问题中包含它 - 问题是 JavaScript 根本无效 - 仅包含它的一部分将无济于事

【解决方案2】：

请试试这个：

<h:selectOneMenu styleClass="portlet-dropdown"  rendered="#{workflowConfig.workflowStep.displayLabel == 'Restore Notification' or workflowConfig.workflowStep.displayLabel == 'Overlapping Follow Up' or workflowConfig.workflowStep.displayLabel == 'Restore'}"  id="offsetAfterBoxMin" value="#{workflowConfig.offsetMinutes}" onchange="getOffset(offsetAfterBoxMin[index].value);">
    <f:selectItems value="${CRUDOperatorProgram.minuteList}" />
</h:selectOneMenu>

并删除：var minutesTemp = dropdown.options[dropdown.selectedIndex].value; 或

<h:selectOneMenu styleClass="portlet-dropdown"  rendered="#{workflowConfig.workflowStep.displayLabel == 'Restore Notification' or workflowConfig.workflowStep.displayLabel == 'Overlapping Follow Up' or workflowConfig.workflowStep.displayLabel == 'Restore'}"  id="offsetAfterBoxMin" value="#{workflowConfig.offsetMinutes}">
    <f:selectItems value="${CRUDOperatorProgram.minuteList}" />
    <f:ajax event="valueChange" execute="getOgetOffset(offsetAfterBoxMin[index].value);"/>
</h:selectOneMenu>

【讨论】：