How to assign drop down list data in this AJAX function?

Question

I want to change the drop down list(ddlSite) when user change the another drop down list(ddlCompany).

So I don't know how to add the new items to ddlsite drop down list.

Ajax Function

function getSite(companyID) {
    alert(companyID);
    $.ajax({
        type: 'POST',
        dataType: 'html',
        url: '@Url.Action("SiteList", "Site")',
        data: ({ ComID: companyID }),
        success: function (result) {
            alert(result);
            $('#SiteList').html(result);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
}

My view

@Html.DropDownList("ddlCompany", ViewData["AllCompany"] as SelectList, "--Select Item--", new { @onchange = "getSite(this.value);" })
<div id="SiteList">
    @Html.Partial("_siteList", SiteList)
</div>

This is my controller

public ActionResult SiteList(int ComID)
{
    var siteQuery = from s in db.tblSites
                    orderby s.SiteName
                    where s.FKComId == ComID
                    select s;
    IEnumerable<SelectListItem> AllSite = new SelectList(siteQuery, "PKSiteID", "SiteName");
    ViewBag.AllSite = siteQuery;

    return PartialView("_siteList", siteQuery);
}

My partial view

@model SKG_website.Models.tblSite

@{
    ViewBag.Title = "_siteList";
    var allSites = ViewBag.AllSite as IEnumerable<SKG_website.Models.tblSite>;  
}

<div id="siteList" class="editor-field">    
    @Html.DropDownListFor(model => model.PKSiteID, new SelectList(allSites, "PKSiteID", "SiteName")) 
</div>  

I don't know how to assign the sslsit drop down list in the AJAX function. How do I do it?