What is my best option to re-populate the dropdown menus, each depending on others and data coming from server?

What is my best option to re-populate the dropdown menus, each depending on others and data coming from server?

  1. $(function() {
  2.         console.log("document read");
  3.         var comingBack = "${comingBack}";
  4.         if(comingBack == "true"){
  5.             var idAndFieldValue = "" + "${testGetIDOnDemandReportFilterAction}";
  6.             var splitString = idAndFieldValue.split(":");
  7.             var selectingID;
  8.             var selectingFieldValue;
  9.             var tagName;
  10.             var i;
  11.             for(i=0; i < splitString.length-1; i+=2){
  12.                 selectingID = splitString[i];
  13.                 selectingFieldValue = splitString[i+1];
  14.                 tagName = $("#"+selectingID).get(0).tagName;
  15.                 if(tagName == "SELECT"){
  16.                     console.log("tag is select");
  17.                     $("#"+selectingID).val(""+selectingFieldValue).change();
  18.                 }
  19.                 if(tagName == "INPUT"){
  20.                     console.log("tag is input");
  21.                     $("#"+selectingID).val(""+selectingFieldValue)
  22.                 }
  23.             }
  24.         }
  25.     });

Posted this at stackoverflow, haven't got a response there. I'll just copy and paste from there:



On page1, a form is submitted and user is taken to page2. The requirement is when the back button is pressed on page2, fields should get repopulated with what they were previously. There is a back button on page2 which brings the user back to page1. I've got 3 dropdowns on page1. $("#"+selectingID).val(""+selectingFieldValue).change(); Calling the .change() function submits to the server, and the first dropdown is repopulated correctly. But the next two drop downs are skipped. This is due to AJAX call.

1. What are my options?

2. What would be the easiest approach?

3. How can I take advantage of .change(fuctionHere())?

I'm using Struts2 framework. I tried the following with the firebug, but the second dropdown still doesn't change:

  1. function d1() {
  2.     var d1 = $("#region").val("EAST").change();
  3. }
  4. $.when(d1()).then(function() {
  5. var d2 = $("#vpgm").val("ERIK GENRICH").change();
  6. });

Thank you for your help.