Question

我有一个多选列表

                    <div id="statusWrapper" class="row" style="left:2px">
                         @Html.LabelFor(model => model.Countries, htmlAttributes: new { @class = "col-sm-4 label-box required" })
                         <div class="col-md-6 input-group" style="left:2px; width: 47%;">
                             @Html.ListBoxFor(model => model.SelectedCountryIds, (MultiSelectList)Model.Countries, new { @class = "multiselect form-control", multiple = "multiple", id = "cbJT" })
                         </div>
                 </div>
                 <div class="row" style="padding:2px">
                     @Html.Label("City", new { @class = "col-sm-4 label-box required" })
                     <div class="col-sm-6 value-box" style="padding-left:2px; padding-top: 2px;">
                         @Html.DropDownListFor(model => model.CityId, Enumerable.Empty<SelectListItem>(), "Select", new { @class = "combobox form-control"})
                         @Html.ValidationMessageFor(x => x.CityId)
                     </div>
                 </div>

第一个是在页面加载时填充的多选下拉列表。只要前一个列表中有选择（或取消选择），就会动态填充第二个下拉列表。

 $('#cbJT').on('change', function (e) {
            $('#CityId').empty();
            $.each(this.selectedOptions, function (id, opt) {
                $('<option>').val(opt.value).text(opt.text).appendTo('#CityId');
            });
 );

这成功附加到select标签，但是下拉列表无法展开，就像它是空的一样，即使经过几次选择后，它仍然保留了几个国家的值。

经过几次选择后生成的HTML：

Answer 1

您需要收听第一个下拉列表的更改事件并读取所选值。对于多选，这将是一个具有所选选项值属性值的值数组，您可以通过ajax将其发送到您的服务器，其中action方法可以使用此数组的id来为您提供属于的城市列表那些国家的ids。

$(document).ready(function() {

    $("#cbJT").change(function() {

        var v = $(this).val();
        $.post("@Url.Action("GetCities", "Home")",{ countryIds: v },function (result) {

                $("#CityId").html("");
                $.each(result,function(a, b) {                        
                       $('<option>').val(b.Value).text(b.Text).appendTo('#CityId');
                });    
        });
    });

});

这里我在javascript中使用@Url.Action方法来生成action方法的正确相对路径。如果您的脚本位于剃刀视图中，它将起作用。如果它在外部javascript文件中。遵循this post中提到的方法。

假设您有一个GetCities操作方法，该方法接受此数组的id并返回SelectListItem个对象的列表。以下示例代码假定您使用实体框架作为数据访问技术，db.Cities将为您提供DbSet<Citiy>集合。

[HttpPost]
public ActionResult GetCities(int[] countryIds)
{    
    var cities = db.Cities
                   .Where(f => countryIds.Contains(f.CountryId))
                   .Select(f => new SelectListItem() { Value = f.Id.ToString(),
                                                       Text = f.Name })
                   .ToList();

    return Json(cities);

}

此外，除非有令人信服的理由，否则我不会为下拉列表提供不同的Id值。辅助方法将从属性名称（SelectedCountriesIds）

生成正确的（对上下文有意义的）Id值

Answer 2

您可以将表单发布到服务器并使用新页面中的值：

using (var container = new UnityContainer())
{
  container.RegisterTypes(
    AllClasses.FromLoadedAssemblies(),
    WithMapping.MatchingInterface,
    WithName.Default,
    WithLifetime.ContainerControlled);
}

否则，如果你想要直接反馈，使用java脚本更容易做到这一点（对用户来说感觉更好，而不是做页面刷新）。

基于asp.net MVC中多选列表中的选择的级联下拉列表

2 个答案: