Why can't I get my DropDownList change event work?

I'm trying to make a simple DropDownList (something that is simple and fun in c# but somehow frustrating in this context) to allow me to navigate around my MVC App.

I'm not experienced with JavaScript at all, but I've spent most of the day trying all sorts of things and using Chrome's JavaScript Console to try and troubleshoot what I can.

This is what I've boiled it down to.

Razor Engine View:

<h2>Index</h2>



<p>

   @Html.DropDownList("DDLRegion", new SelectList(ViewBag.Tables), new { @id  = "DDLRegion" }) <br />

   @Html.ActionLink("Area1", "Index", "Area1") <br />

   @Html.ActionLink("Area2", "Index", "Area2") <br />

   @Html.ActionLink("Area3", "Index", "Area3") <br />

</p>



@section Scripts{

 <script src="/Scripts/jquery-1.10.2.js" type="text/javascript"></script>

 <script type="text/javascript">

     $("#DDLRegion").change(function () {

         var selectedItem = $(this).val();



         switch (selectedItem) {

            case '0':

               window.location.href = @Url.Action("Index", "Area1");

               break;

            case '1' :

               window.location.href = @Url.Action("Index", "Area2");

               break;

            case '2' :

               window.location.href = @Url.Action("Index", "Area3");

               break;

            default:

               window.location.href = @Url.Action("Index", "Area1");

               alert("Blarg");

               break;

         }

      });

  </script>

}

The latest error from the JavaScript console is complaining about missing a / on the case '0' block for the @Url.Action method (translates to end up as '/Area1').