.net core 添加省市区三级联动以及编辑时显示选中的城市。

  1 @model Core.Net.Model.CoreNetBuild.CoreNetPrejectAllocation;
  2 @using Core.Net.Common.Core.Net.Core;
  3 @using Core.Net.Web.Common;
  4 @{
  5     Layout = "~/Views/Shared/_LayoutEdit.cshtml";
  6     int Id = ConvertHelper.SafeParse(ViewContext.RouteData.Values["id"] as string, 0);
  7     int CityIds = 0;
  8     int AreaIds = 0;
  9     if (Id > 0)
 10     {
 11         CityIds = Model.CityId;
 12         AreaIds = Model.AreaId;
 13     }
 14 }
 15 <div class="layui-fluid" style="background-color: #FFFAFA">
 16     <div class="layui-row">
 17         @using (Html.BeginForm("Edit", "PrejectAllocation", FormMethod.Post, new { id = "form1", @class = "layui-form", @action = "/CoreNetBuildManager/PrejectAllocation/Edit/", @ajax = false }))
 18         {
 19             @Html.AntiForgeryToken()
 20             @Html.HiddenFor(model => model.AllocationId)
 21
 22             <div class="layui-form-item">
 23                 <label for="AreaName" class="layui-form-label"><span class="x-red">*</span>选择地区</label>
 24                 <div class="layui-input-inline layui-show-xs-block" style="width: 105px; height: 30px;"><select name="provid" id="provid" lay-filter="provid"><option value="410000" selected>河南省</option></select></div>
 25                 <div class="layui-input-inline layui-show-xs-block" style="width: 105px; height: 30px;"><select name="cityid" id="cityid" lay-filter="cityid"></select></div>
 26                 <div class="layui-input-inline layui-show-xs-block" style="width: 105px; height: 30px;"><select name="areaid" id="areaid" lay-filter="areaid"></select></div>
 27             </div>
 28             <div class="layui-form-item">
 29                 <label for="PrejectId" class="layui-form-label"><span class="x-red">*</span>所属项目</label>
 30                 <div class="layui-input-inline">
 31                     @Html.DropDownListFor(m => m.PrejectId, DropdownHelper.getPrejectList(), new { @required = "请选择项目" })
 32                 </div>
 33             </div>
 34             <div class="layui-form-item">
 35                 <label for="PrejectId" class="layui-form-label"><span class="x-red">*</span>基站类型</label>
 36                 <div class="layui-input-inline">
 37                     @Html.DropDownListFor(m => m.JzType, DropdownHelper.getJzTypeList(), new { @required = "请选择项目" })
 38                 </div>
 39             </div>
 40             <div class="layui-form-item">
 41                 <label for="PrejectId" class="layui-form-label"><span class="x-red">*</span>施工队长</label>
 42                 <div class="layui-input-inline">
 43                     @Html.DropDownListFor(m => m.AddPerson, DropdownHelper.BuildTeamSet(), new { @required = "请选择项目" })
 44                 </div>
 45             </div>
 46             <div class="layui-form-item">
 47                 <label for="DepartName" class="layui-form-label"><span class="x-red">*</span>任务数量</label>
 48                 <div class="layui-input-inline">
 49                     @Html.TextBoxFor(m => m.TaskCount, null, new Dictionary<string, object> { { "class", "layui-input" }, { "lay-verify", "required" } })
 50                 </div>
 51             </div>
 52             <div class="layui-form-item">
 53                 <label for="WorkTitle" class="layui-form-label"><span class="x-red">*</span>备注</label>
 54                 <div class="layui-input-inline" style="width:400px;height:100px">
 55                     @Html.TextAreaFor(m => m.Info, new Dictionary<string, object> { { "class", "layui-textarea" }, { "lay-verify", "required" } })
 56                 </div>
 57             </div>
 58             <div class="layui-form-item">
 59                 <label for="L_repass" class="layui-form-label"> </label>
 60                 <button class="layui-btn" @*id="validatemobile"*@ lay-filter="add" lay-submit="" onclick="submitclose()" id="editsubmit">提交</button>
 61             </div>
 62         }
 63     </div>
 64 </div>
 65 <script src="~/UpFile/CityList.js?t=@DateTime.Now.ToString(" yyyyMMddhhmmss")"></script>
 66 <script src="~/js/arealist.js"></script>
 67 <script type="text/javascript">
 68     layui.use(['table', 'layer', 'jquery', 'form'], function () {
 69         var layer = layui.layer, $ = layui.jquery, form = layui.form; table = layui.table;
 70         //area("cityid,areaid");
 71          var cityarr = provinceList[0].children;
 72         var proviceid = 410000;
 73         $('#cityid').empty();
 74         $('#cityid').append(new Option("请选择城市", 0));
 75
 76         for (var i = 0; i < cityarr.length; i++) {
 77             if (cityarr[i].pId == proviceid) {
 78
 79                 $('#cityid').append(new Option(cityarr[i].title, cityarr[i].id));// 下拉菜单里添加元素
 80             }
 81         }
 82         form.render();
 83         //城市选择变化时
 84         form.on('select(cityid)', function (data) {
 85             cityChange(data.value);
 86             form.render();//下拉菜单渲染 把内容加载进去
 87         });
 88         function cityChange(data) {
 89             if (data == 0) {
 90                 $('#areaid').empty();
 91                 $('#areaid').append(new Option("请选择县区", 0));
 92             }
 93             var cityarr = provinceList[0].children;
 94             for (var i = 0; i < cityarr.length; i++) {
 95                 if (cityarr[i].id == data) {
 96                     $('#areaid').empty();
 97                     $('#areaid').append(new Option("请选择县区", 0));
 98                     for (var j = 0; j < cityarr[i].children.length; j++) {
 99                         $('#areaid').append(new Option(cityarr[i].children[j].title, cityarr[i].children[j].id));// 下拉菜单里添加元素
100                     }
101                 }
102             }
103             form.render();//下拉菜单渲染 把内容加载进去
104         }
105         $('#provid').val(410000);
106         $('#cityid').val('@CityIds');
107         cityChange('@CityIds');
108         $('#areaid').val('@AreaIds');
109         cityChange('@AreaIds');
110         form.render();//下拉菜单渲染 把内容加载进去
111     });
112 </script>
添加效果图                                                                                     编辑效果图