Trouble with Javascript to populate values in drop down prompts

[vvasireddy9]

I have a requirement to cascade dropdown2 based on dropdown1 without refreshing the page. The values in these dropdowns are very few and wouldn't change so I went ahead with a javascript to populate dropdown2 with certain static values which are also defined in javascript based on user selection on dropdown1.

The javascript did its job to show the right values in dropdown2 based on dropdown1.onchange value. So, each time user changes value in dropdown1, the javascript removes all values in dropdown2 and adds new values based on the selection in dropdown1.
The issue is, when I submit the page to run the report, the value selected in dropdown2 is not being substituted in the filter parameter. Below is the code.

When I remove the "attribute.remove()" part, the filter is getting substituted with the value selected in dropdown2 but I need to remove the old values.

<script language="javascript">

var f = (typeof getFormWarpRequest == "function" ? getFormWarpRequest() : document.forms["formWarpRequest"]);
if (!f || f == undefined) {
  f = ( formWarpRequest_THIS_ ? formWarpRequest_THIS_ : formWarpRequest_NS_ );
}
var dim1 = f.p_Dimension1;
var column=f._oLstChoicesColumn1;
var attribute=f._oLstChoicesAttribute1;


var Brand= ["BrandType", "BrandPrioritization", "BrandCategory"];
var Branddisplay= ["Brand Type", "Brand Prioritization", "Brand Category"];
var PlanChannel=["Plan Channel"];
var PlanChanneldisplay=["Plan Channel"];
var DistributorGroup = ["Distributor Group", "Parent Distributor Group"];
var DistributorGroupdisplay = ["Distributor Group", "Parent Distributor Group"];
var BusinessUnit = ["Zone"]
var BusinessUnitdisplay = ["Zone"]




column.onchange = function ()
{

   var columnSelection=column.options[column.selectedIndex].value.replace(/\s/g, "");
   var attributeValues = window[columnSelection];
   var attributeDisplayValues = window[columnSelection+"display"];

       for(var i = attribute.options.length - 1 ; i >= 0 ; i--)
       {
          attribute.remove(i);
       }



               for(var i=0;i<attributeValues.length;i++)

               {   
                  attribute.options[attribute.options.length] = new Option(attributeDisplayValues,attributeValues);
               }

attribute.options[0].selected = true;

}

</script>