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>

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

Answer 1

借助javascript，

h:selectOneMenu可以重置为原始值。

首先，您需要定义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 事件）或 更改所选值时，您需要拦截时刻键盘（ 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取消重置值

1 个答案: