使用部分视图单击按钮后添加的下拉列表中添加选项

时间:2014-01-31 02:00:09

标签: javascript jquery asp.net-mvc

我有一个允许添加城市的表单。单击“添加”按钮,然后从下拉列表中选择城市,即可添加每个城市。最初显示第一个下拉列表。单击addCity按钮时,它将调用Controller操作AddCity并返回部分视图。下拉列表从地图对象填充,其中键是城市的名称。 cshtml背后的javascript文件可以填充下拉列表。填充第一个下拉列表,因为它在文档准备就绪时可用。单击“添加”按钮后,我应该如何确保新的下拉列表中还包含选项中的城市。

这是我的主要观点和部分观点。

MainView.cshtml

<form id="myForm">
    <div id="info">
        @Html.Partial("_City")
    </div>
    <button id="addCity" class="btn" data-url='Url.Action("AddCity")'> Add </button>
</form>

_City.cshtml

<div class="city-info">
    <div class="row">
        <ul class="dropdown-menu cityList"></ul>
    </div>
</div>

Controller类具有:

public ActionResult AddCity()
{
    return PartialView("_City");
}

javascript文件代码包含:

var cityMap = {...some data...}
// Add new city on button click
$(function () {
    $('#addCity').click(function (e) {
        e.preventDefault();

        var $infoDiv = $('#info');
        var url = $(this).data('url');

        $.get(url, function (data) {
            $infoDiv.append(data);
        });
    });
});

$(document).ready(function () {
    $.each(cityMap, function (key, value) {
        $(".cityList").append("<li> <a tabindex=\"-1\" href=\"#\">" + key + "</a> </li>");
    });
}

如何将相同的功能应用于新添加的cityList项目?我尝试了一些jquery,但是我找不到新添加的dropdownlist(cityList)元素。

0 个答案:

没有答案