title: JavaScript function not calling ActionResult
body: <p>I have a DropDownList on my Razor page </p>
  
  <pre><code>@Html.DropDownListFor(Model =&gt; Model.Clubs, new SelectList(ViewBag.Clubs as System.Collections.IEnumerable, "Id", "Name"),
                            "-- Select a club --",
                            new { id = "ddlClubs" })
  </code></pre>
  
  <p>That populates another DropDownList with a Json call from a javascript function:</p>
  
  <pre><code>$(function () {
    $("#ddlClubs").change(function () {
    var clubid = $(this).val();
    $.getJSON("../Administration/LoadCompsByClubId", { clubid: clubid },
      function (compsData) {
        var select = $("#ddlComps");
        select.empty();
        select.append($('&lt;option/&gt;', {
        value: 0,
        text: "-- select a competition --"
    }));
    $.each(compsData, function (index, itemData) {
      select.append($('&lt;option/&gt;', {
        value: itemData.Value,
        text: itemData.Text
      }));
    });
  });
  </code></pre>
  
  <p>This DropDownList is correctly populated.</p>
  
  <pre><code>@Html.DropDownList("Id", new SelectList(Enumerable.Empty&lt;SelectListItem&gt;(),
                      "Id", "Name"),  "-- select a competition --",
                      new{
                          id = "ddlComps",
                          data_url = Url.Action("GetTeams", "Administration")
                      })
  </code></pre>
  
  <p>Now when I call the change function to load the <code>ActionResult</code> into the div, the associated <code>GetTeams</code> Action is not being called.</p>
  
  <pre><code> $(function () {
      $('#ddlComps').change(function () {
          var url = $(this).data('url');
          var value = $(this).val();
          $('#result').load(url, { id: value });
  
      });
  });
  </code></pre>
  
  <p>Can anyone see where I am going wrong? Bet it is simple as usual...</p>