javascript - struts2 optiontransferselect retrieve and display value from database

Question

In the jsp page, I have a <s:optiontransferselect> for swap values between left side and right side and a submit button to save.

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

I run the program, it actually can save the value from the right side. However it does not show the saved values there.

I am thinking about using javascript and use onchange event in <s:optiontransferselect> to achieve this

<script>
function show(){
  var 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>

When I run the program, the right side still cannot show the saved value.

More information about the optiontransferselect in case it is useful.

I have an action class for it.

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;
}

}

update

I change option from String to List<String> with the proper getter and setter. I run the code, the optiontransferselect still cannot show the saved values.

Which part I did wrong? Would someone let me know please? Thank you.

update I created a new jsp for example, success.jsp. If I selected some values to selectOption and click the submit button. the jsp file can display the values that I just submitted. I can see the saved values in the database. However the optiontransferselect still cannot show the saved values.

The success.jsp has one code which can display the value I have just submitted.

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

In the database, I can see the saved values, so I would like to know how to let the optiontransferselect show the saved values?

another update

I try to use a button to call javascript function to show selectedValues before submit.

<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()"/>

I run the program, when I click the button, it can show the selected values before submit, so I still don't understand why the optiontransferselect cannot get saved selected values.

question from:https://stackoverflow.com/questions/47342331/struts2-optiontransferselect-retrieve-and-display-value-from-database

Answer 1

Waitting for answers