You could add your selected ID to the URL, then read that ID on the next page load, eg:
Page 1:
function DropDownHomepageUrl() {
var strHomepageUrlListId = $("#HomepageUrlList option:selected").text();
window.location.href =
document.getElementById("HomepageUrlList").value
+ "?selected=" + strHomepageUrlListId;
}
Page 2:
$(function() {
$("#HomepageUrlList").val(getUrlVars()["selected"]);
});
// From https://stackoverflow.com/a/4656873/2181514
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
As you're using MVC, this would be better served by adding selected to your 2nd page parameters rather than using jquery to get the query string, then you would pass the selected value in with your viewmodel.
However, in your case, there's no need as the page already knows which drop down value it should be showing, because that's the page it's on.
Assuming your url selector is in a partial/reusable bit of code rather than on each page (each page would make it even simpler):
AboutUs.cshtml
....
<option selected value="@Url.Action("Aboutus", "Home")">About us</option>
<option value="@Url.Action("Contactus", "Home")">Contact us</option>
ContactUs.cshtml
....
<option value="@Url.Action("Aboutus", "Home")">About us</option>
<option selected value="@Url.Action("Contactus", "Home")">Contact us</option>
So on each page you can pass is details to your partial stating what the page is.
Add an enum with the list of pages, then pass that in, eg;
@Html.Partial("urlNavigator", Page.AboutUs)
if you don't want an enum, then pass in as a string. Then your partial can read that and selected the correct value during rendering.
This way you also remove the FOUC where it updates the drop down only after the page has loaded (which, frankly, looks a bit rubbish).
