How can create dropdownlist dynamically with jquery?

See more:

Ajax

Please Excuse Me Because my english language in not very well!
My Scenario is I want to get data from First dropdownliast and Bind to dynamic dropdownlist.

What I have tried:

In controller I do this for first dropdownlist:

public ActionResult Create()
        {
            List<SelectListItem> Zone = new Karaneh_Inf().C_Tbl_Center.Select(p => new SelectListItem()
            {
                Text = p.ZoneName,
                Value = p.IdZone.ToString(),
            }).Distinct().ToList();
            ViewBag.Zone = Zone;
            return View();
        }

In View:

<div class="form-group">
            @Html.LabelFor(model => model.IdZone, "منطقه", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("zoneid", ViewBag.Zone as List<SelectListItem>, null, htmlAttributes: new { @class = "form-control", onChange = "Get(this.value)" })
                @Html.ValidationMessageFor(model => model.IdZone, "", new { @class = "text-danger" })
            </div>
        </div>

<select id="centers">
            <option>No-Data</option>
        </select>

Then I use jquery for ajax:

function Get(zoneid) {


            $.ajax('/Person/CenterDDL/' + zoneid).done(function (data) {
                $('#centers').append(data);
            });
        }

Also I write a action to create partialview for second dropdownliast:

public PartialViewResult CenterDDL(int zoneid)
        {
            return PartialView(new Karaneh_Inf().C_Tbl_Center.Where(p => p.IdZone == zoneid).ToList());
        }

Then Create PartialView:

@using Karaneh.Models
@model List<c_tbl_center>


<div class="form-group">
    <label>Center</label>
    <div class="col-md-10">
        @foreach (C_Tbl_Center center in Model)
        {
            <option value="@center.CenterCode">@center.CenterName</option>
        }
    </div>
</div>

But when I run the project,doesn't created any dynamically dropdownliat!