若依不分离+Thymeleaf select选中多个回显

最新推荐文章于 2025-10-18 12:57:02 发布

原创最新推荐文章于 2025-10-18 12:57:02 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ruoyi

若依专栏收录该内容

2 篇文章

订阅专栏

文章讲述了在项目开发中，如何实现在添加表单时允许用户多选select元素，以及在编辑时如何回显已绑定的通道。重点在于编辑回显部分，利用Thymeleaf模板引擎中的`th:selected`属性配合后端返回的数据动态显示选中状态。

项目中遇到的场景，亲测实用
表单添加时，select选中多个，编辑表单时，select多选回显，如图
在这里插入图片描述
代码：

// 新增代码
<label class="col-sm-3 control-label">通道：</label>
	<div class="col-sm-8">
    	<select name="channelIds" multiple id="channelIds" class="form-control">
        	<option th:each="channel:${channels}" th:value="*{channel.id}" th:text="${channel.channelName}">
            </option>
        </select>
    </div>

// 编辑回显
<label class="col-sm-3 control-label">通道权限</label>
	<div class="col-sm-8">
		<select name="channelIds" multiple id="channelIds" class="form-control">
			<option th:each="channel:${channels}" th:value="*{channel.id}" th:text="${channel.channelName}"
					th:selected="${selectChannels.contains(channel.id)}">
			</option>
		</select>
	</div>

编辑回显重点是th:selected=“${selectChannels.contains(channel.id)}”
selectChannels是后端返回的已绑定的通道列表，channels是通道列表