JSF SelectOneMenu onchange，onsubmit取消重置值

Question

在JSF SelectOneMenu上，我具有ajax事件onchange，並且帶有帶有確認問題的onsubmit，當用戶中止更改時，如何將SelectOneMenu上的值重置回原始值？

<h:selectOneMenu value="#{bean.selectedFruit}">
  <f:selectItems value="#{bean.fruits}"/>
  <a:support event="onchange" onsubmit="if(!confirm('Are you sure?'))return false;}" action="#{bean.loadFruitStats}" rerender="body"/>
</h:selectOneMenu>

因此，在上面的示例中，當用戶在確認對話框中單擊“否”時，未調用該操作，並且未調用rerender，因此SelctOneMenu位於更新的“水果”名稱上，而不是原始名稱（因此該水果名稱並且水果統計信息不匹配）。 我該怎么做才能使其同步？

Answer 1

可以借助javascript將h:selectOneMenu重置回原始值。

1. 首先，您需要為h:selectOneMenu定義一個id 。 例如

    <h:selectOneMenu id="selFruitId"...> 

2. 將以下（不言自明的）Java腳本添加到jsf頁面

    var currentValue; function saveCurrentValue(){ //get html select element var element=document.getElementById("form:selFruitId"); //saves currently selected value currentValue=element.value; } function areYouSure(){ if(!confirm('Are you sure?')){ //if canceled, restores previously saved value document.getElementById("form:selFruitId").value=currentValue; return false; } } 

3. 然后，當用戶嘗試使用鼠標 （ onclick事件）或鍵盤 （ onkeypress事件，例如，左右鼠標光標或其他鍵） 更改選定值時，需要攔截一下，並保存當前選定的值以備后用。

    <h:selectOneMenu id="selFruitId" onclick="saveCurrentValue()" onkeypress="saveCurrentValue()"...> 

4. 最后，在執行ajax之前，您需要調用function areYouSure() ，如果取消該function areYouSure() ，則將保存的（原始）值恢復為h:selectOneMenu 。

    <h:selectOneMenu value="#{bean.selectedFruit}" id="selFruitId" onclick="saveCurrentValue()" onkeypress="saveCurrentValue()"> <f:selectItems value="#{bean.fruits}"/> <a:support event="onchange" onsubmit="areYouSure()" action="#{bean.loadFruitStats}" rerender="body"/> </h:selectOneMenu>