Hy everyone!

I have a inexplicable problem:

- I have 2 select in my VF page

- The select value connect to varibale of controller

1.) If I open the page and don't modify the generated SELECT element everything is ok.

2.) If I modify the generated SELECT element (with javascript or firebug) - add or remove options - something go wrong: I click on the save button and the page is reloaded without my controller's code run.

If anyone knows what is the problem, please tell me, because I spent a lot of time to solve this problem... :S

VF PAGE:

<apex:page controller="modifyuserGroupController" tabStyle="Admin__tab" >
    <script type="text/javascript">  
        function moveOptions(sourceID, destID) {
            var src=document.getElementById(sourceID);
            var dest = document.getElementById(destID);
            
            for(var count=0; count < src.options.length; count++) {
                if(src.options[count].selected == true) {
                    var option = src.options[count];
                    
                    var newOption = document.createElement("option");
                    newOption.value = option.value;
                    newOption.text = option.text;
                    newOption.selected = true;
                    try {
                        dest.add(newOption, null); //Standard
                        src.remove(count, null);
                     }catch(error) {
                        dest.add(newOption); // IE only
                        src.remove(count);
                     }
                    count--;
                }
            }
        }
    </script>
    
        <apex:form id="createUG" >
            <table class="dfTable" >
              <th colspan="3" class="tableHeader" >Add users to the usergroup</th>
              <tr>
                 <td>Actual users</td>
                 <td>&nbsp;</td>
                 <td>Available users</td>
              </tr>
              <tr class="odd">
              <td class="column1">
                  <apex:selectList id="actUser" value="{!selectedUserID}" multiselect="true" styleClass="actualRoles" size="6" >
                        <apex:selectOptions value="{!items2}" ></apex:selectOptions>
                  </apex:selectList>
               </td>
               <td>
                   <a href="#" id="add" onClick="moveOptions('{!$Component.actUser}','{!$Component.availableUser}')" >&gt;&gt;</a>
                   <br />
                   <br />
                   <a href="#" id="remove" onClick="moveOptions('{!$Component.availableUser}', '{!$Component.actUser}')" >&lt;&lt;</a>
                 </td>
                 <td>
                     <apex:selectList id="availableUser" multiselect="true" styleClass="availableRoles" size="6" >
                          <apex:selectOptions value="{!items}" ></apex:selectOptions>
                      </apex:selectList>    
                  </td>
             </tr>
                    
          </table>
               
          <apex:commandButton action="{!cancel}" title="Cancel" styleClass="commandBtn" value="Cancel"  />
          <apex:commandButton action="{!save}" title="Save" styleClass="commandBtn" value="Save"  />
                
       </apex:form>
 </apex:page>

CONTROLLER:

public class modifyuserGroupController {
    
    String[] selectedUserID = new String[]{};
    String[] availableUserID = new String[]{};

    public void setSelectedUserID (String[] selectedUserID){ this.selectedUserID = selectedUserID; }
    public String[] getSelectedUserID (){ return this.selectedUserID; }
    
    public void setAvailableUserID (String[] availableUserID){ this.availableUserID = availableUserID; }
    public String[] getAvailableUserID (){ return this.availableUserID; }

    ...