title: Set the dropdown value on back button getting loaded from server side
body: <p>I have a page with 4 dropdowns.When I select the first dropdown there is a Ajax call will filter the other 3 dropdowns data, and click on submit button to display the second page.Now when I click on back button of browser the dropdowns in the first page has to retain the previous filled in data. only first dropdown is retaining the data, other 3 dropdowns are not populating the previously selected data.For this I am setting the cookie on click of form submit as follows:</p>
  
  <pre><code>this.SetCookieForPriceGuide = function () {
          document.cookie = "VehicleMake=" + $("#VehicleMake").val();
          document.cookie = "VehicleYear=" + $("#VehicleYear").val();
          document.cookie = "VehicleModel=" + $("#VehicleModel").val();
          document.cookie = "VehicleDamage=" + $("#VehicleDamage").val();
  
      };
  </code></pre>
  
  <p>SetCookieForPriceGuide in the button click event and on the back button the load function being called and there I am trying to set the dropdowns values as follows</p>
  
  <pre><code>this.load = function () {
          var VehicleYear = getCookie("VehicleYear");
          var VehicleMake = getCookie("VehicleMake");
          var VehicleModel = getCookie("VehicleModel");
          var VehicleDamage = getCookie("VehicleDamage");
  }
  </code></pre>
  
  <p>getCookie method is as follows:</p>
  
  <pre><code>function getCookie(cookieValue) {
      var textValue = cookieValue + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i &lt; ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') c = c.substring(1);
          if (c.indexOf(textValue) == 0) {
              return c.substring(textValue.length, c.length);
          }
      }
      return "";
  }
  </code></pre>