I am trying to create dropdown list when selecting item from the other dropdown list. I use $.getJSON to get data from my action in controller here is my code.
JQuery Code looks like this.

```
      $(function() {
      $("#GroupName").change(function() {
          //alert("Test");
          var str = "";
          $("select option:selected").each(function() {
              str = $(this).val();
          });
          var url = '<%= Url.Action("GetMetrics", "Groups") %>';
          $.getJSON(url, { id : str }, function(data) { $("#metrics").fillSelect(data); });
      })
      //        .change();

  });

```

My view looks like this.

```
<p><label for="GroupId">Group</label><br />
    <%= Html.DropDownList("GroupName", "")%>    
<span></span>
</p>

<p><label for="GroupId">Group</label><br />
    <select id="metrics" >
</select>
<span></span>
</p>

```

And My Action:

```
public ActionResult GetMetrics(string id)
{
    int cId = Convert.ToInt16(id);
    //var group = Group.GetGroupByID(cId);
    List<Metric> metrics = Metric.GetMetrics(cId);

    return Json(metrics);
}   

```

Here is my routing:

```
    routes.MapRoute(
        "Default",                                              // Route name
        "{controller}/{action}/{id}",                           // URL with parameters
        new { controller = "Home", action = "Index", id = "" }  // Parameter defaults
    );

```

Problem is I can't pass the parameter from Jquery and doesn't add listitem in my target dropdown list which is metrics. Please help!