DropDownList onchange causes other controls to lose values

I have  page with a datalist that contains two dropdownlists and several textbox controls. The two dropdownlists contain the same items but in different order. When the user selects an item in one dropdown, it also selects the same item in the other dropdown.

If I don't have the onchange event for the second dropdown, submitting the page will correctly validate the dropdownlists and textboxes which are all required fields. But with the second dropdown's onchange event, the dropdowns return to their initial unselected state and the textboxes are again empty.


The dropdowns have the following client side events:

ddlA.Attributes.("onchange") ="javascript: return changeDropDownA(this);"

Select allOpen in new window

ddlB.Attributes.("onchange") ="javascript: return synchDropDowns(this, '" & e.Item.FindControl("ddlA").ClientID & "');"

Select allOpen in new window

where the javascript functions are defined as follows:

  function changeDropDownA(e) {
    // other code to show / hide other visual elements on page goes here

    var eDropDownB = document.getElementById(e.id.replace(/ddlA/,'ddlB'));
    synchDropDown(e, eDropDownB);

    // more code to show / hide other visual elements on page goes here
  }

  function synchDropDown(src, ddl) {
    src = (typeof src == 'string') ? document.getElementById(src) : src;
    ddl = (typeof ddl == 'string') ? document.getElementById(ddl) : ddl;

    if (src && ddl) {
      ddl.value = src.value;
    }

    return true;
  }

Select allOpen in new window

If I change the second dropdown's onchange event to a simple "alert('changed');", the page posts back normally and the lists and textboxes keep their values. But if I add the synchDropDown event, they lose their values on postback.

I'm not sure how my code is preventing the datalist from preserving the control's values on postback.

Thanks in advance.