layui select 下拉框 级联 动态赋值 与获取选中值 省市区级联

//下拉框必须在  class="layui-form" 里 不然监听事件没有作用
<div class="layui-form" >
        <div class="layui-inline">
            <label class="layui-form-label">选择项目：</label>
            <div class="layui-input-inline">
                <select name="quiz" id="quiz" lay-filter="projectfilter">
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">选择子级：</label>
            <div class="layui-input-inline">
                <select name="project" id="project"  >
                </select>
            </div>
        </div>
        <button id="shuxinBtn" class="layui-btn" lay-submit="" lay-filter="seekClassRoom">
            <i class="layui-icon">&#xe615;</i>
        </button>
    </div>
 $.ajax({
                url : "project/findByParentId",
                data : {},
                dataType : "json",
                success : function(resultData) {
                    $("#quiz").empty();
                    if(resultData.code == 0){
                        console.log(resultData.data);
                        $("#quiz").append(new Option("请选择项目", ""));
                        $.each(resultData.data, function(index, item) {
                            $('#quiz')
                                    .append(new Option(item.projectName, item.id));
                        });
                    }else{
                        $("#quiz").append(new Option("暂无数据", ""));
                    }
                    
                    layui.form.render("select");
                }
            })
            
            //级联子项目
            //select 监听
            form.on('select(projectfilter)',function(data){
                var value=data.value;  //select选中的值
                console.log(value);
                $.ajax({
                    url:"project/findParentId",
                    data:{parentId:value},
                    dataType:"json",
                    success:function(resultData){
                        if(resultData.code == 0){
                        //清空赋值
                            $("#project").empty();
                            console.log(resultData.data);
                            $("#project").append(new Option("请选择项目", ""));
                            $.each(resultData.data, function(index, item) {
                            //赋值
                                $('#project')
                                        .append(new Option(item.projectName, item.id));
                            });
                        }else{
                            $("#project").append(new Option("暂无数据", ""));
                        }
                        layui.form.render("select");
                    }
                })
            })
            layui.form.render("select");
        });


两种方式赋值——————————————————————
$("#getInfoName").find("option[value='"+data.PROJECT_ID+"']").prop("selected",true);
form.render();  //必须要加
                    
$("#getInfoName").prop("disabled",true);   //选中不可点击

 

源文：https://blog.csdn.net/qq_35226176/article/details/84325814  layui select 下拉框 级联 动态赋值 与获取选中值

 

 

省市区级联

<div class="row flex-row">
            <div>省份：</div>
            <select id="ProvinceID" name="ProvinceID">
                <option value="">--请选择省份--</option>
                @if ((List<ValueText>)ViewData["Provices"] != null)
                {
                    var check = "";
                    
                    foreach (var item in (List<ValueText>)ViewData["Provices"])
                    {
                        if (item.Value.Equals(Model.ProvinceID))
                        {
                            check = "selected='selected'";
                        }
                        else
                        {
                            check = "";
                        }
                        <option value="@item.Value" @check>@item.Text</option>
                    }
                }
            </select>
        </div>
        <div class="row flex-row">
            <div>城市：</div>
            <select id="CityID" name="CityID">
                <option value="">--请选择城市--</option>
            </select>
        </div>

        <div class="row flex-row">
            <div>区域：</div>
            <select id="AreaID" name="AreaID">
                <option value="">--请选择区域--</option>
            </select>
        </div>


<script>
 $(function () {
 if (@Model.ProvinceID > 0) {
            $("#CityID").html("<option value=''>--请选择城市--</option>");
            $("#ProvinceID").val(@Model.ProvinceID);
            choseRegion("CityID", @Model.ProvinceID, @Model.CityID)
        }
        if (@Model.CityID > 0) {
            $("#AreaID").html("<option value=''>--请选择区域--</option>");
            choseRegion("AreaID",  @Model.CityID, @Model.AreaID)
        }

  });

   $("#ProvinceID").change(function () {
        $("#CityID").html("<option value=''>--请选择城市--</option>");
        $("#AreaID").html("<option value=''>--请选择区域--</option>");
        choseRegion("CityID", $("#ProvinceID").find("option:selected").val(), @Model.CityID)
    });

    $("#CityID").change(function () {
        $("#AreaID").html("<option value=''>--请选择区域--</option>");
        choseRegion("AreaID", $("#CityID").find("option:selected").val(), @Model.AreaID)
    });

       function choseRegion(selectId,parentID,selectData) {
        $.ajax({
            url: "@Url.Content("~/Account/RegionChange")",
            type: 'post',
            dataType: 'json',
            timeout: 10000,
            async: false,
            data: {
                parentID: parentID
            },
            success: function (data) {
                if (data.Status & data.Data != null) {
                    if (data.Data.length > 0) {
                        for (var i = 0; i < data.Data.length; i++) {
                            var defaultSelect = data.Data[i].Value == selectData;
                            $(new Option(data.Data[i].Text, data.Data[i].Value, false, defaultSelect)).appendTo('#' + selectId);
                        }
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                ShowServerBusyTip("服务器没有返回数据，可能服务器忙，请稍候再试！");
            }
        });
    };
</script>

 

省市区级联  https://blog.csdn.net/qq_17202783/article/details/43371421