如何從javascript中的<h：selectOneMenu>中獲取所選項目

我試圖從selectOneMenu onchange中獲取所選項目，但它不起作用。每次我改變下拉列表，選擇其他選項，在我的網頁瀏覽器的控制檯說如何從javascript中的<h：selectOneMenu>中獲取所選項目

財產「的getOffset」的值爲null或undefined，而不是一個函數對象

這是我叫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>

這是我hourList和被填充selectOneMenu用於minuteList方法.xhtml頁面...

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 =「」？

來源

2012-11-14 Zack

從實際代碼，很難定義問題的可能性。如果你分析生成的HTML代碼（或者發佈它看看會發生什麼）會更好。 –

@LuiggiMendoza我已經看過生成的HTML代碼，因爲我使用的是java bean和jsf，所以當設置html時，我設置爲的id發生了變化。在此示例中，offsetSummaryAfterBox的ID更改爲ProgramDetails：DispatchConfigurationCustom：0：offsetSummaryAfterBox。這可能不是導致此錯誤的主要問題。但我需要找到一種方法來區分我正在編輯的offsetSummaryAfterBox。例如：（ProgramDetails：DispatchConfigurationCustom：0：offsetSummaryAfterBox）vs.（ProgramDetails：DispatchConfigurationCustom：1：offsetSummaryAfterBox） – Zack

@LuiggiMendoza如果您想了解更多信息，我很樂意帶您參加聊天或其他資源。非常感謝 – Zack

你在你的腳本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"; 
}

即添加if的else後 - 你不能使用else時，除非你有if檢查的條件太

來源

2012-11-14 14:23:02 ManseUK

謝謝。我刪除了「。」但仍然得到相同的錯誤。如果在那裏有其他許多檢查，我確實有其他的檢查，但是我把它們放在了較小的位置。有沒有其他想法？有沒有辦法讓我區分'ProgramDetails：DispatchConfigurationCustom：0：offsetSummaryBeforeBox'和'ProgramDetails：DispatchConfigurationCustom：1：offsetSummaryBeforeBox'？ – Zack

@Zack如果你有其他的代碼，那麼請包括在你的問題 - 問題是，JavaScript根本無效 - 只包括它的一部分將不會幫助 – ManseUK

更新代碼 – Zack

請試試這個：

<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>

來源

2012-11-14 17:19:29 TalesTk

如何從javascript中的<h：selectOneMenu>中獲取所選項目

回答

相關問題