title: ASP.NET MVC3 dropdown JQuery change event wire up gone wrong
body: <p>I am trying to wire up and change event jQuery handler for a dropdown list I have to populate a div "payment" with html returned from my controller action as soon as user changes a value in the dropdown.</p>
  
  <p>Here is what I have so far and I have no idea why it's not working or on how to chase this further.  No errors or response from changing the dropdown value.  Any help very much appreciated!</p>
  
  <p>cshtml:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $("#PaymentType").change(function () {
          var selection = $("#PaymentType").val();
          var dataToSend = {
              paymentType: selection
          };
  
          $.ajax({
              url: "Order/PaymentChanged",
              type: "GET",
              data: dataToSend,
              success: function (data) {
                  $("#payment").text("server returned:" + data.agent);
              }
          });
      });
  });
  &lt;/script&gt;
  
  @using (Html.BeginForm())
  {
     &lt;div id = "payment"&gt;
     &lt;br /&gt;
     @Html.Label("Select payment method")
     &lt;br /&gt;
     &lt;select id="PaymentType" name="PaymentType"&gt;
       &lt;option value="CreditCard"&gt;Credit Card&lt;/option&gt;
       &lt;option value="Cash"&gt;Cash&lt;/option&gt;
       &lt;option value="Check"&gt;Check&lt;/option&gt;
     &lt;/select&gt;
     &lt;/div&gt;
   }
  </code></pre>
  
  <p>OrderController.cs</p>
  
  <pre><code>    public JsonResult PaymentChanged(string paymentType)
      {
          return Json(new { agent = "sample html" }, JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p>Standard, largely unchanged _Layout.cshtml file with all jQuery src including src="/Scripts/jquery-1.5.1.min.js"</p>