JSF SelectOneMenu onchange, onsubmit 取消重置值答案

【问题标题】：JSF SelectOneMenu onchange, onsubmit cancel reset valueJSF SelectOneMenu onchange, onsubmit 取消重置值
【发布时间】：2018-05-13 10:25:58
【问题描述】：

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

所以在上面的例子中，当用户在确认对话框上单击“否”时，不会调用该动作，也不会调用重新渲染，因此 SelctOneMenu 是在更新的“水果”名称上，而不是原来的名称（所以水果名称和水果统计信息不匹配）。我可以做些什么来同步它们？

【问题讨论】：

标签： ajax jsf onchange selectonemenu onsubmit

【解决方案1】：

h:selectOneMenu 可以在 javascript 的帮助下重置为原始值。

首先，您需要将id 定义为h:selectOneMenu。例如
```
<h:selectOneMenu id="selFruitId"...>
```

将以下（不言自明的）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;
      }
 }

然后您需要截取用户尝试使用鼠标（onclick 事件）或键盘更改选定值的时刻strong>（onkeypress 事件，例如左右上下光标键或其他键）并保存当前选择的值以备后用。
```
<h:selectOneMenu id="selFruitId" 
                 onclick="saveCurrentValue()" onkeypress="saveCurrentValue()"...>
```

最后，在执行 ajax 之前，您需要调用 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>

【讨论】：