title: ASP.NET MVC 3 with Razor DropDownListFor change not firing
body: <p>I've seen a lot of questions on here regarding DropDownList and DropDownListFor events not firing but no answers that solve my problem. I don't think I've overlooked anything so I'll post my own question...</p>
  
  <p>I have the following code in my View:</p>
  
  <pre><code>@model MyWebApp.ViewModels.ProductAdminViewModel
  @{
      ViewBag.Title = "Manage Products";
  }
  &lt;script type="text/javascript"&gt;
      $(function () {
          $('select#CurrentCategoryId').change(function () {
              alert('We got here!');
          })
      });
  &lt;/script&gt;
  
  @using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "indexGrid" }))
  { 
      &lt;fieldset&gt;
          &lt;legend&gt;Select Category&lt;/legend&gt;&lt;span&gt;Category: &lt;/span&gt;
          @Html.DropDownListFor(model =&gt; model.CurrentCategoryId, Model.CategorySelectList, new { @id = "CurrentCategoryId" })
      &lt;/fieldset&gt;
  }
  &lt;div id="indexGrid"&gt;
      @Html.Partial("_indexGrid", Model)
  &lt;/div&gt;
  </code></pre>
  
  <p>The drop-down is populated correctly from the SelectList in my ViewModel and the only other thing to note is that the CurrentCategoryId in the VM is a public int property.</p>
  
  <p>What have I overlooked in tying the drop-down to the script?</p>
  
  <p>EDIT: I have the following in my _Layout.cshtml file:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/Scripts/prototype.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/Scripts/scriptaculous.js?load=effects,builder"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/Scripts/lightbox.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/Scripts/jquery-ui-1.8.16.custom.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/Scripts/EditorTypes.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Thanks to @Hawkke. This is my working code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function CategoryChanged(newCategoryId) {
          alert('The category has been changed!');
      };
  &lt;/script&gt;
  ...
  @Html.DropDownListFor(model =&gt; model.CurrentCategoryId, Model.CategorySelectList, new { @onchange = "CategoryChanged(" + @Model.CurrentCategoryId + ")" })
  </code></pre>