title: bind drop down list using jquery ajax on change of first ddl
body: <p>I have two drop down lists, onchange of first drop downlist i want to populate the second one in ajax.
  I get the SelectListItem in ajax how to pass that to drop down list to bind it?</p>
  
  <p>view:</p>
  
  <pre><code>                @Html.DropDownList("FirstID", ViewBag.Groups as IEnumerable&lt;SelectListItem&gt; )
  
                  @Html.DropDownList("SecondID", ViewBag.Policies as IEnumerable&lt;SelectListItem&gt;)
  </code></pre>
  
  <p>Ajax method in view:</p>
  
  <pre><code>$(function () {
      $('#FirstID').change(function () {
          var selectedValue = $(this).val();
          $.ajax({
              url:  '@Url.Action("BuildSecondDropDownLists", "controller")',
              type: "POST",
              data: { id: selectedValue },
             error: function (xhr, ajaxOptions, thrownError) {
                 alert(xhr.status);
                 alert(thrownError);
             },
              success: function (result) {
                  alert(result);
                   //here how i can bind second drop down list
  
              }
          });
      });
  });
  </code></pre>
  
  <p>Controller:                   </p>
  
  <pre><code>  public IEnumerable&lt;SelectListItem&gt; BuildSecondDropDownLists(int id)
      {
  
          Pol = new SelectList(GetData(), "SecondID", "Name");
  
  
          ViewBag.Pol = Pol;
  
          return Pol;
      }
  </code></pre>