如何用HtmlDropdown助手替换ajax调用创建的基本HTML下拉列表

Question

所以，我有两个drodpowns，两个下拉列表都按预期工作。因此，输入第二个下拉列表由第一个drodpown中选择的条目确定。另外，我在页面重新加载时添加了一个脚本调用CountrySelectionChanged，以便根据第一个下拉列表的初始值填充第二个下拉列表。

<script type="text/javascript">
        $(function () {
            CountrySelectionChanged();
        });
 </script>      
<div id="Admin">
        Select an account:
        @Html.DropDownList("countrySelection", (List<SelectListItem>)ViewBag.AvailableAccounts, new { onchange = "CountrySelectionChanged()"})
        <p id="Temp">
            Select a city:
            <select id="City" name="City"></select>
        </p>
  </div>

    AJAX CALL:
    function CountrySelectionChanged() {
    // logic taken out for brevity
    $.ajax({
        type: 'POST',
        url: '/Settings/GetCity',
        data: { accountId: accountId },
        success: function (data) {
            debugger;
            var locationDropdown = '';
            for (var x = 0; x < data.length; x++) {
                locationDropdown += '<option value="' + data[x].Value + '">' + data[x].Text + '</option>';
            }
             $('#City').html(locationDropdown);
        },
        error: function () {
            DisplayError('Failed to load the data.');
        }
    });

}

问题：有没有办法可以使用HTML Helper来显示第二个下拉列表？我可以以某种方式将ajax返回注入HTML Helper（即使它没有强烈约束）。