jeesite 单选多选下拉框回显效果实现

最新推荐文章于 2023-10-19 13:50:01 发布

Sen_mitsuji

最新推荐文章于 2023-10-19 13:50:01 发布

阅读量2.8k

点赞数 5

分类专栏： java 文章标签： jeesite java 前端 js 回显

本文链接：https://blog.csdn.net/qq_37130868/article/details/102553384

版权

本文介绍了在jeesite框架中如何实现单选和多选下拉框的动态数据加载以及回显效果。针对回显问题，提出了通过JS处理和后端数据配合的方式，解决了在jeesite下拉框组件中多选时无法正确显示已选状态的问题。

摘要由CSDN通过智能技术生成

使用背景

最近在做一个基于jeesite关于多媒体广告投放的系统其中有写到单选多选下拉框回显

由于选项是用接口动态生成，发现框架里非字典的下拉框并不好用，网上搜不到解决方案，所以自己写了两种下拉框及回显并记录一下。

多媒体管理：
在这里插入图片描述

区域管理：
在这里插入图片描述

设备管理：
在这里插入图片描述

单选下拉框动态下拉列表生成及数据回显

期望效果：
在这里插入图片描述
单选下拉框列表：
我使用的ajax动态生成的下拉选项，返回的map作为下拉列表的label和value
js代码：

var putMap = {
   };
$.ajax({
   
    url: "${pageContext.request.contextPath}/get_put_select2",
    success: function (obj) {
   
        putMap = obj;
        $.each(putMap,function(key,value){
   //动态生成下拉选项
            if('${multiMedia.putId}' != key){
   //遍历时排除回显
                $("#putOptions").append("<option  value='" + key + "'>" + value + "</option>");
            }
        })
    }
});

单选下拉框及回显实现：

 <div class="control-group">
     <label class="control-label">投放区域：</label>
     <div class="controls">
         <form:select path="putId" class="input-xlarge required" id="putOptions">
             <form:option value="" label="----请选择投放区域----"/>