Question

如何根据下拉列表中选择的项目显示一组复选框？

我有一个包含'状态'的下拉列表。用户可以将城市添加到州。使用2个下拉列表（一个包含所有状态，另一个包含所有可能的城市）进行此操作将永远让用户将它们全部添加。

因此，在这种情况下，所有城市的一组复选框将是一种更加用户友好的方法。但是我该怎么做？我怎样才能把所有内容都贴回来？

我根本不知道如何做到这一点，所以我也没有代码显示！：（

[编辑]

我的控制器的一部分：

public ActionResult Index()
{
   IEnumerable<SelectListItem> ddlStates= dataContext.States
                              .Select(c => new SelectListItem
                              {
                                  Value = c.StateID.ToString(),
                                  Text = c.Name
                              });

   ViewBag.States = ddlStates;

   return View();
}

观点：

@model dataContext.States

@{
    ViewBag.Title = "Details";
}

@Html.DropDownList("States")

这就是我来的。

Answer 1

ok首先渲染状态（我假设您已经提供了具有视图模型的状态列表）：

<select id="stateList">
<option value="0">-------- select state ------ </option>
@foreach(var state in Model.States)
{
     <option value="@state.Id">
              @state.Name
     </option>
}
</select>

<div id="cityContainer">

</div> 

<input type="button" id="submitChanges">

通过处理变更事件来获取城市列表：

$("#stateList").change(function(){
      var id = $("option:selected",$(this)).attr("Id");
      $.ajax({
             url:'@Url.Action("getStateCities","YourController")'               
             data = {stateId = id},
             success:function(data){
                   $.each(cities, function () {
                            var $cityList = $("#cityContainer");
                            var $checkbox= $("<input type='checkbox'></input>").attr("value",this.Id).text(this.CityName);
                            if (this.isInState)
                             {
                                $checkbox.attr("checke","checked");  
                             }
                            $checkbox.appendTo($cityList);
                        });
             } 
      })
});

你的控制器动作看起来像这样：

public JsonResult getStateCities(int stateId)
        {
            var data = _addressService.GetStateCities(Id).Select(c => new { c.CityName, c.Id  ,  isInState = isCityInEstate(cityId)});
            return new JsonResult { Data = data };
        }

实施GetStateCities和isCityInEstate取决于您。现在将表单数据发送回控制器：

  $("#submitChanges").click(function(){
       var citiesToSubmit = [];
       $("input[type=checkbox]",$("#cityContainer")).each(function(){                
            var include = $(this).prop('checked'),              
                cityId = $(this).attr("Id"); 
            citiesToSubmit.push({CityId:cityId, Include : include});
       });
       $.ajax({
            url:'@Url.Action("SubmitCities","YourController")',
            data :{StateId = $("#estateList").attr("Id") , Cities : citiesToSubmit}
            success:function(){
                  alert('cities submitted');
            }
       });
  });

最后是控制器：

   public class SubmitedCityViewModel
   {
       public int StateId {get;set;}

       public List<CityViewModel> Cities {get;set;}
   }

   public class CityViewModel
   {
       public int cityId {get;set;}
       public bool Include {get;set;}    
   }



   public JsonResult SubmitCities(SubmitedCityViewModel model){
           foreach(var city in model.Cities)
           { 
               if (city.Inclue)
               {
                     //update db to include 
                     _addressService.AddCityToState(city.Id,model.StateId);
               }                  
               else
               { 
                   //update db to remove
                     _addressService.RemoveCityFromState(city.Id,model.StateId);
               }
           } 
   }

根据下拉列表中的选定项目显示复选框

1 个答案: