Dropdown on masterpage. How to get the selected value right

Question

I have a website on with MVC, which has a dropdown in the masterpage. The data in the database is linked to a Year. so every year we get a new clean DB to start with (or so it seems from the website, because the Year changed)

The dropdown box lets you select the year you want to edit/see/go into.

in the global.asax i have a method:

   public static SelectList schooljaarList() {
        NASDataContext _db = new NASDataContext();
        int schooljaarID = (from p in _db.Schooljaars
                            where p.Sch_Schooljaar == SCHOOLJAAR
                            select p.Sch_ID).First();
        return new SelectList(_db.Schooljaars.ToList(), "Sch_ID", "Sch_Schooljaar", schooljaarID);
    }

which makes the selectlist for the dropdown, and sets the default value to the current year.

i've altered the routing so that the year is always visible in the URL

routes.MapRoute(
            "Default", // Route name
            "{schooljaar}/{controller}/{action}/{id}", // URL with parameters
            new { schooljaar = MvcApplication.SCHOOLJAAR, controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
            , new { schooljaar = @"(19|20)\d\d-(19|20)\d\d" }
        );

In the masterpage i added the control:

  <%= Html.DropDownList("schselectr", MVC2_NASTEST.MvcApplication.schooljaarList())%>

and when someone selects another year in the dropdown, i navigate to the matching url using jQuery

   $(document).ready(function() {

        $("#schselectr").change(function() {
            //alert(window.location.pathname);
            var oldpath = window.location.pathname;
            // alert($('option:selected', this).text());
            var newpath = "http://" + window.location.host + "/" + $('option:selected', this).text().trim() + window.location.pathname.substr(10);
            //alert(newpath);
            window.location = newpath;
        });
    });

till here everything works.

The URL looks like this: http://localhost:50152/2010-2011/Lesgever 2010-2011 is the year.

Now, when i am on this URL. i want that the selected value in the dropdown list will not be the current year, but the year that is visible in the URL.

I've tried adding the following code in the jQuery's document.ready function

        alert(window.location.pathname.substr(1, 9).trim());
        document.getElementById("schselectr").value = "2010-2011";
        //$("#schselectr").val(window.location.pathname.substr(1, 9).trim());

but it doesn't work. the JS does not generate any errors. i'm using firefox.

my questions:

• How do i get this to work, that the year of the URL will be the selected item in the dropdown, using javascript, jquery, or preferably even in MVC.

• How would you improve my working method for this system. (aka: the method in the global.asax, ...)

Answer 1

When you set the value of the select box, are you trying to set it to the visible text, or the background value.

The following:

$("#schselectr").val('2010-2011')

will work if the the select HTML is like so

<select id='schselectr'>
    <option value='2009-2010'>2009-2010</option>
    <option value='2010-2011'>2010-2011</option>
</select>

However, if the HTML that comes out is:

<select id='schselectr'>
    <option>2009-2010</option>
    <option>2010-2011</option>
</select>

Then it will not work.

Can you post the select HTML that is generated. I.e. do a view-source.