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

 

@model Core.Net.Model.CoreNetBuild.CoreNetPrejectAllocation;
@using Core.Net.Common.Core.Net.Core;
@using Core.Net.Web.Common;
@{
    Layout = "~/Views/Shared/_LayoutEdit.cshtml";
    int Id = ConvertHelper.SafeParse(ViewContext.RouteData.Values["id"] as string, 0);
    int CityIds = 0;
    int AreaIds = 0;
    if (Id > 0)
    {
        CityIds = Model.CityId;
        AreaIds = Model.AreaId;
    }
}
<div class="layui-fluid" style="background-color: #FFFAFA">
    <div class="layui-row">
        @using (Html.BeginForm("Edit", "PrejectAllocation", FormMethod.Post, new { id = "form1", @class = "layui-form", @action = "/CoreNetBuildManager/PrejectAllocation/Edit/", @ajax = false }))
        {
            @Html.AntiForgeryToken()
            @Html.HiddenFor(model => model.AllocationId)

            <div class="layui-form-item">
                <label for="AreaName" class="layui-form-label"><span class="x-red">*</span>选择地区</label>
                <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>
                <div class="layui-input-inline layui-show-xs-block" style="width: 105px; height: 30px;"><select name="cityid" id="cityid" lay-filter="cityid"></select></div>
                <div class="layui-input-inline layui-show-xs-block" style="width: 105px; height: 30px;"><select name="areaid" id="areaid" lay-filter="areaid"></select></div>
            </div>
            <div class="layui-form-item">
                <label for="PrejectId" class="layui-form-label"><span class="x-red">*</span>所属项目</label>
                <div class="layui-input-inline">
                    @Html.DropDownListFor(m => m.PrejectId, DropdownHelper.getPrejectList(), new { @required = "请选择项目" })
                </div>
            </div>
            <div class="layui-form-item">
                <label for="PrejectId" class="layui-form-label"><span class="x-red">*</span>基站类型</label>
                <div class="layui-input-inline">
                    @Html.DropDownListFor(m => m.JzType, DropdownHelper.getJzTypeList(), new { @required = "请选择项目" })
                </div>
            </div>
            <div class="layui-form-item">
                <label for="PrejectId" class="layui-form-label"><span class="x-red">*</span>施工队长</label>
                <div class="layui-input-inline">
                    @Html.DropDownListFor(m => m.AddPerson, DropdownHelper.BuildTeamSet(), new { @required = "请选择项目" })
                </div>
            </div>
            <div class="layui-form-item">
                <label for="DepartName" class="layui-form-label"><span class="x-red">*</span>任务数量</label>
                <div class="layui-input-inline">
                    @Html.TextBoxFor(m => m.TaskCount, null, new Dictionary<string, object> { { "class", "layui-input" }, { "lay-verify", "required" } })
                </div>
            </div>
            <div class="layui-form-item">
                <label for="WorkTitle" class="layui-form-label"><span class="x-red">*</span>备注</label>
                <div class="layui-input-inline" style="width:400px;height:100px">
                    @Html.TextAreaFor(m => m.Info, new Dictionary<string, object> { { "class", "layui-textarea" }, { "lay-verify", "required" } })
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label"> </label>
                <button class="layui-btn" @*id="validatemobile"*@ lay-filter="add" lay-submit="" onclick="submitclose()" id="editsubmit">提交</button>
            </div>
        }
    </div>
</div>
<script src="~/UpFile/CityList.js?t=@DateTime.Now.ToString(" yyyyMMddhhmmss")"></script>
<script src="~/js/arealist.js"></script>
<script type="text/javascript">
    layui.use(['table', 'layer', 'jquery', 'form'], function () {
        var layer = layui.layer, $ = layui.jquery, form = layui.form; table = layui.table;
        //area("cityid,areaid");
         var cityarr = provinceList[0].children;
        var proviceid = 410000;
        $('#cityid').empty();
        $('#cityid').append(new Option("请选择城市", 0));

        for (var i = 0; i < cityarr.length; i++) {
            if (cityarr[i].pId == proviceid) {

                $('#cityid').append(new Option(cityarr[i].title, cityarr[i].id));// 下拉菜单里添加元素
            }
        }
        form.render();
        //城市选择变化时
        form.on('select(cityid)', function (data) {
            cityChange(data.value);
            form.render();//下拉菜单渲染 把内容加载进去
        });
        function cityChange(data) {
            if (data == 0) {
                $('#areaid').empty();
                $('#areaid').append(new Option("请选择县区", 0));
            }
            var cityarr = provinceList[0].children;
            for (var i = 0; i < cityarr.length; i++) {
                if (cityarr[i].id == data) {
                    $('#areaid').empty();
                    $('#areaid').append(new Option("请选择县区", 0));
                    for (var j = 0; j < cityarr[i].children.length; j++) {
                        $('#areaid').append(new Option(cityarr[i].children[j].title, cityarr[i].children[j].id));// 下拉菜单里添加元素
                    }
                }
            }
            form.render();//下拉菜单渲染 把内容加载进去
        }
        $('#provid').val(410000);
        $('#cityid').val('@CityIds');
        cityChange('@CityIds');
        $('#areaid').val('@AreaIds');
        cityChange('@AreaIds');
        form.render();//下拉菜单渲染 把内容加载进去
    });
</script>
添加效果图                                                                                     编辑效果图