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>

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

Answer 1

h:selectOneMenu 可以在 java 脚本的帮助下重置回原始值。

首先你需要定义一个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事件）或keyboard（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>

JSF SelectOneMenu onchange、onsubmit 取消重置值

JSF SelectOneMenu onchange, onsubmit cancel reset value

ajax

jsf

onchange

selectonemenu

onsubmit