javascript - struts2 optiontransferselect 从数据库中检索和显示值

Question

在jsp页面中，我有一个<s:optiontransferselect>用于在左侧和右侧之间交换值以及要保存的提交按钮。

<s:optiontransferselect 
    allowUpDownOnLeft="false"
    allowUpDownOnRight="false"
    allowSelectAll="false"
    allowAddAllToLeft="false"
    allowAddAllToRight="false"
    addToRightLabel="Go to right"
    addToLeftLabel="Go to left" 
    leftTitle="Left side values"
    headerKey="0"
    name="option"
    list= "optionList"
    rightTitle="Right side values"
    doubleHeaderKey="0"
    doubleList="selectedOptionList" 
    doubleName="selectOption"
    doubleId="selectedValues"
>
</s:optiontransferselect>

<s:submit />

我运行程序，它实际上可以保存右侧的值。但是，它不会在那里显示保存的值。
我正在考虑使用 javascript 并使用 onchange <s:optiontransferselect> 中的事件为达到这个

<script>
    function show(){
        const list = document.getElementById("selectedValues");
        for (var i = 0; i < list.options.length; i++) {
        //seems something not correct in this part but I am not sure how solve in this way 
            list.options[i].selected = true;
        }
        return true;
    }
</script>

<s:optiontransferselect 
    allowUpDownOnLeft="false"
    allowUpDownOnRight="false"
    allowSelectAll="false"
    allowAddAllToLeft="false"
    allowAddAllToRight="false"
    addToRightLabel="Go to right"
    addToLeftLabel="Go to left" 
    leftTitle="Left side values"
    headerKey="0"
    name="option"
    list= "optionList"
    rightTitle="Right side values"
    doubleHeaderKey="0"
    doubleList="selectedOptionList" 
    doubleName="selectOption"
    doubleId="selectedValues"
    onchange ="show()" <!-- onchange seems not work here -->
> 
</s:optiontransferselect>

当我运行程序时，右侧仍然无法显示保存的值。
有关 optiontransferselect 的更多信息，以防它有用。
我有一个 Action 课。

public class OptionTransferSelectAction extends ActionSupport {
    private List<String> optionList;
    private List<String> selectedOptionList;
    //private String option;
    private  List<String> option;
    private List<String> selectOption;

    public OptionTransferSelectAction (){
        optionList=new ArrayList<String>();
        //display on the left side for selection
        optionList.add("Section A");
        optionList.add("Section B");
        optionList.add("Section C");
        optionList.add("Section D");
        optionList.add("Section E");
        optionList.add("Section F");
        optionList.add("Section G");
        optionList.add("Section H");

        selectedOptionList=new ArrayList<String>();
        //display on the right side
        //pretend it does not have any values in the first time (does not 
        //trigger the save yet)
        
    }   

    public List<String> getOptionList() {
        return optionList;
    }

    public void setOptionList(List<String> optionList) {
        this.optionList = optionList;
    }

    public List<String> getSelectedOptionList() {
        return selectedOptionList;
    }

    public void setSelectedOptionList(List<String> selectedOptionList) {
        this.selectedOptionList = selectedOptionList;
    }
    /*
    public String getOption() {
        return option;
    }

    public void setOption(String option) {
        this.option = option;
    }
    */
    public List<String> getOption() {
        return option;
    }

    public void setOption(List<String> option) {
        this.option = option;
    }


    public List<String> getSelectOption() {
        return selectOption;
    }

    public void setSelectOption(List<String> selectOption) {
        this.selectOption = selectOption;
    }
}

更新
我从 String 更改选项至 List<String>使用适当的 getter 和 setter。我运行代码 optiontransferselect仍然无法显示保存的值。
我做错了哪一部分？有人可以告诉我吗？谢谢你。
更新
例如，我创建了一个新的 jsp，success.jsp。如果我选择了一些值来选择选项并单击提交按钮。 jsp文件可以显示我刚刚提交的值。我可以看到数据库中保存的值。但是 optiontransferselect 仍然无法显示保存的值。
success.jsp 有一个代码可以显示我刚刚提交的值。

Selected Value(s) : <s:property value="selectOption"/>

在数据库中，我可以看到保存的值，所以我想知道如何让 optiontransferselect显示保存的值？
另一个更新
我尝试使用按钮调用javascript函数来显示 selectedValues在提交之前。

<script>
    function testshow() {
        var value = document.getElementById("selectedValues");
        for(var i=0;i<value.options.length; i++) {
            alert(value.options[i].innerHTML);
        }
        return true;
    }
</script>

//button to call the function
<s:submit onclick="return testshow()"/>

我运行程序，当我点击按钮时，它可以显示提交前选择的值，所以我还是不明白为什么 optiontransferselect无法获取保存的选定值。

Answer 1

我认为要解决您的问题，您需要了解两件事:

Struts Action 的生命周期。

optiontransferselect确实有效。

Struts Action 的生命周期
我从那个开始，因为这可能已经解决了你的问题。
👉 为每个请求创建一个新的 Struts Action 实例。
这意味着当你连接属性时 list (左侧)和 doubleList (右侧)到从 ActionSupport 派生的类中的字段- 就像示例中的 OptionTransferSelectAction以上 - 您必须确保使用有意义的值对其进行初始化，我的意思是反射(reflect)您想要向用户显示的当前状态的值。在最坏的情况下，您必须在每次请求时从数据库中获取值。
或者，您可以将 bean 注入(inject)具有专用生命周期的操作(例如 session 范围)。我可能会在单独的帖子中说明这一点。
(顺便说一句，如果其他人可以提供更多信息，如果可以直接更改 Struts 操作的生命周期，我将不胜感激)。

如何 optiontransferselect作品
此标签包含两个 select 标签(或更具体的 updownselect 标签)。我先列一下它的作用，因为它让我们更好地理解 optiontransferselect . (旁注:与 JSF 不同，Struts 清楚地区分了 get 和 set 操作的属性。)
连接 select标签与基础数据，这些是三个相关的属性:

list - 这是所有可用值的列表 (=get)。

value - 这是最初选择的值列表 (=get)。

name - 将在表单提交 (=set) 时提供所选值的操作的属性(字段)的名称。

因此，您的操作将收到的唯一属性是与 name 相关的属性。 . select标签不会...

...将完整的值列表(list 的值)发回操作。

...更改 list 的值和 value在底层 Java 类/ Action 中。

optiontransferselect 也是如此。 .这使得语义很奇怪，因为某些更改(即哪些值显示在左侧，哪些值显示在右侧)永远不会回传到 Struts 操作，您只能获取 已选择双方的值(value)观。
主要区别在于您现在拥有这三个属性两次:

列表 --> list左边和doubleList为右侧。

值(value) --> value左边和doubleValue为右侧。

姓名 --> name左边和doubleName为右侧。

现在的问题是如何得出您只会获得选定的值？我建议在提交之前自动选择它们:

<s:submit value="Save" onclick="selectAllOptions(document.getElementById('idLeft'));selectAllOptions(document.getElementById('idRight'));"/>

在哪里 idLeft对应于 id 的值在选项transferselect 和 idRight对应于 doubleId 的值.通过该更改，您将在 name 中获得左右值的完整列表。和 doubleName分别。
该代码与使用 allowSelectAll="true" 获得的按钮完全相同。和 JavaScript 方法 selectAllOptions由 Struts 通过 optiontransferselect.js 提供，无论 allowSelectAll 是真还是假。