角色（单选）联动小区（多选）再联动楼栋（多选）

最新推荐文章于 2025-04-25 19:16:38 发布

holita

最新推荐文章于 2025-04-25 19:16:38 发布

阅读量98

点赞数

文章标签： java json spring

本文链接：https://blog.youkuaiyun.com/holita/article/details/123323643

版权

这篇博客主要探讨了前端页面中角色选择与小区、楼栋联动效果的实现，通过JavaScript和AJAX动态加载数据。在添加和编辑页面中，根据用户选择的角色类型展示或隐藏相应输入字段，并在选择小区后异步获取楼栋信息，优化了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

add页面

 <div class="row">
            	<div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">角色：</label>
                        <div class="col-xs-10">
                            <label th:each="role:${roles}" class="rad">
								<input name="roleId" type="radio" th:value="${role.roleId}" th:text="${role.roleName}" th:disabled="${role.status == '1'}" th:checked="${role.flag}">
							</label>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="form-group" name="xiaoqu" >
                <label class="col-sm-2 control-label is-required">小区：</label>
                <div class="col-sm-4">

                    <select name="communityId" id="project" class=" form-control m-b select2-multiple" onchange="getBuilding()" multiple required>

                        <option th:each="qt:${data}" th:value="${qt.id}"
                                th:text="${qt.name}" ></option>
                    </select>
                </div>
            </div>
            <div class="form-group" name="lou" >
                <label class="col-sm-2 control-label is-required">楼栋：</label>
                <div class="col-sm-4">
                    <select name="building" id="building" class="form-control m-b select2-multiple" multiple required>

                    </select>
                </div>
            </div>

function getBuilding() {
            // var community = new Array();
             // community = $("#community option:selected").value();
            var community = $.form.selectSelects("project").toString();
            debugger;
            if (community == '') {
                return;
            }
            $.ajax({
                type: "get",
                url: prefix + "/getBuilding?community=" + community,
                success: function (result) {
                    console.log(result);
                    var datas=result;
                    var optionstring = "";
                    for (var j = 0; j < datas.length; j++) {
                        optionstring += "<option value=\"" + datas[j].id + "\" >" + datas[j].name + "</option>";
                    }

                    $("#building").html(optionstring);
                }
            });
        }


        $(":radio").click(function() {
            var num = $(this).val();  // 当前按钮的value值对应需要显示文本框的位置
            debugger;
            if(num == 2){
                $("div[name='xiaoqu']").show();
                $("div[name='lou']").show();
            }else if(num == 100){
                $("div[name='xiaoqu']").show();
                $("div[name='lou']").hide();
            }else {
                $("div[name='lou']").hide();
                $("div[name='xiaoqu']").hide();
            }
        });

edit页面

 <div class="row">
            	<div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">角色：</label>
                        <div class="col-xs-10">
                            <label th:each="role:${roles}" class="rad">
								<input name="roleId"  type="radio" th:value="${role.roleId}" th:text="${role.roleName}" th:checked="${role.flag}" th:disabled="${role.status == '1'}">
							</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group" name="xiaoqu" hidden>
                <label class="col-sm-2 control-label is-required">小区：</label>
                <div class="col-sm-4">
                    <select name="communityId" id="project" class=" form-control m-b select2-multiple" onchange="getBuild()" multiple required>
                        <option th:each="qt:${data}" th:value="${qt.id}"
                                th:text="${qt.name}" th:selected="${qt.flag}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group" name="lou" hidden>
                <label class="col-sm-2 control-label is-required">楼栋：</label>
                <div class="col-sm-4">
                    <select name="building"  id="build" class="form-control m-b select2-multiple" multiple required>
                        <option th:each="dept:${building}" th:value="${dept.id}" th:text="${dept.name}"
                                th:selected="${dept.flag}"></option>
                    </select>
                </div>
            </div>

$(function() {
           
            var num = $( "input[name='roleId']:checked ").val();
            if(num == 2){
                $("div[name='xiaoqu']").show();
                $("div[name='lou']").show();
            }else if(num == 100){
                $("div[name='xiaoqu']").show();
                $("div[name='lou']").hide();
            }else {
                $("div[name='lou']").hide();
                $("div[name='xiaoqu']").hide();
            }
        });
 function getBuild() {
           
                var num = $( "input[name='roleId']:checked ").val();
                if(num == 2){
                    $("div[name='lou']").show();
                }else if(num == 100){
                    $("div[name='lou']").hide();
                }
            var community = $.form.selectSelects("project").toString();
            debugger;
            if (community == '') {
                return;
            }
            $.ajax({
                type: "get",
                url: prefix + "/getBuilding?community=" + community,
                success: function (result) {
                    console.log(result);
                    var datas=result;
                    var optionstring = "";
                    for (var j = 0; j < datas.length; j++) {
                        optionstring += "<option value=\"" + datas[j].id + "\" >" + datas[j].name + "</option>";
                    }

                    $("#build").html(optionstring);
                }
            });
        }
        

        $(":radio").click(function() {
            var num = $(this).val();  // 当前按钮的value值对应需要显示文本框的位置
            if(num == 2){
                $("div[name='xiaoqu']").show();
                $("div[name='lou']").show();
            }else if(num == 100){
                $("div[name='xiaoqu']").show();
                $("div[name='lou']").hide();
            }else {
                $("div[name='lou']").hide();
                $("div[name='xiaoqu']").hide();
            }
        });

后台

 @GetMapping("/getBuilding")
    @ResponseBody
    public List<HdBuilding> getBuilding(String community)
    {
        return hdBuildingService.selectBuildingListByCommunity(community);
    }

@Override
    public List<HdBuilding> selectBuildingListByCommunity(String communityId)
    {
        return hdBuildingMapper.selectBuildingListByCommunity(Convert.toStrArray(communityId));
    }

public List<HdBuilding> selectBuildingListByCommunity(String[] communityId);

<select id="selectBuildingListByCommunity"  resultMap="HdBuildingResult">
        <include refid="selectHdBuildingVo"/>
        <where>
        community_id in
            <foreach item="id" collection="array" open="(" separator="," close=")">
                #{id}
            </foreach>
        </where>

    </select>