select-c:forEach 数据的默认选中

本文介绍了一种前后端交互的方式,具体为如何从前端向后台请求所有下拉列表数据,并在前端页面上展示这些数据。此外,还讨论了如何在修改操作时,根据后台传来的默认值来设置下拉列表的默认选项。

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

后台向前台传入所有的下拉列表数据

List<SysDictVO> sysRoleTypeList = sysDictService.findSysDictBySdCode(SDCODE_ROLE_TYPE);
modelMap.put("sysRoleTypeList", sysRoleTypeList);

获取后台传入的所有下拉列表的数据

<select id="srType" name="srType" style="width:180px;" value="test">
<c:forEach var="sd" items="${sysRoleTypeList}" >
<option value="${sd.sdId}">${sd.sdName}</option>
</c:forEach>

</select>

修改操作从后台传入的默认下拉框需要显示的数据

<input type="hidden" id="srType1" name="srType1" value="${sysRoleVO.srType}" />


关键:根据后台默认传递的值,来默认选中下拉框的值
$(function(){
var st = $("#srType1").val();//修改数据从后台查询而得
                        $("#srType option[value= "+st+" ] ").attr("selected",true);//使得select默认选中后台查询到的val

  });

注意变量之间引号的正确使用 向后台传值是通过name,故如果传递srType的数据来源就成select下拉选择框

<template> <div class="checkbox-container"> <h2>Vue Checkbox 全选/单选联动</h2> <!-- 全选控制 --> <div class="select-group"> <input type="checkbox" id="selectAll" v-model="selectAll" :indeterminate="indeterminate" > <label for="selectAll">全选</label> <span class="indicator"> ({{ selectedCount }} / {{ options.length }}) </span> </div> <hr> <!-- 子选项 --> <div class="option-group" v-for="(option, index) in options" :key="option.id"> <input type="checkbox" :id="'option' + index" v-model="option.selected" @change="updateIndeterminate" > <label :for="'option' + index"> {{ option.label }} <span class="option-id">(ID:{{ option.id}})</span> </label> </div> <!-- 操作统计 --> <div class="results"> <h3>当前选中:</h3> <ul> <li v-for="option in selectedOptions" :key="option.id"> {{ option.label }} (ID:{{ option.id }}) </li> <li v-if="selectedOptions.length === 0">没有选中任何选项</li> </ul> </div> </div> </template> <script setup> import { ref, computed, reactive } from 'vue' // 选项列表 const options = reactive([ { id: 1, label: '选项A', selected: false }, { id: 2, label: '选项B', selected: false }, { id: 3, label: '选项C', selected: false }, { id: 4, label: '选项D', selected: false }, ]) // 计算属性:选中的子选项 const selectedOptions = computed(() => options.filter(option => option.selected) ) // 计算属性:选中的数量 const selectedCount = computed(() => options.reduce((count, option) => count + (option.selected ? 1 : 0), 0) ) // 中间态(当部分选中时) const indeterminate = ref(false) // 更新中间态状态 const updateIndeterminate = () => { indeterminate.value = selectedCount.value > 0 && selectedCount.value < options.length } // 计算属性:全选状态 const selectAll = computed({ get: () => selectedCount.value === options.length, set: (newValue) => { // 当全选状态变化时,更新所有子选项 options.forEach(option => { option.selected = newValue }) indeterminate.value = false // 重置中间态 } }) </script> <style> .checkbox-container { max-width: 500px; margin: 2rem auto; padding: 1.5rem; border-radius: 10px; background: #f8f9fa; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } h2 { color: #2c3e50; text-align: center; margin-bottom: 1.5rem; } .select-group { padding: 0.8rem; background: #e1f5fe; border-radius: 6px; margin-bottom: 1.5rem; font-weight: bold; display: flex; align-items: center; gap: 10px; } .option-group { padding: 0.8rem; background: #fff; border-radius: 6px; margin: 0.5rem 0; display: flex; align-items: center; gap: 10px; transition: background 0.2s; } .option-group:hover { background: #e8f4ff; } .indicator { margin-left: auto; color: #546e7a; font-size: 0.9rem; } .option-id { font-size: 0.8rem; color: #78909c; } .results { margin-top: 2rem; padding: 1rem; border-top: 1px dashed #b0bec5; } .results h3 { margin-top: 0; color: #37474f; } .results ul { padding-left: 20px; list-style-type: square; } .results li { padding: 0.3rem 0; color: #455a64; } hr { border: 0; border-top: 1px solid #e0e0e0; margin: 1rem 0; } </style>逐行中文解释每行代码含义
06-08
<template> <view style="width: 95%; margin: 0px auto;"> <view style="width: 100%; height: 4rem;"></view> <view style="color: #dddddd;"> 文字风格 </view> <view style="width: 100%; height: 20rpx;"></view> <view style="position: relative;"> <textarea style="background-color: #22252E; color: #ccc; padding: 20rpx;width: 95%; margin: 0px auto; border-radius: 15px;" v-model="value2" placeholder="请输入内容"></textarea> <view style="background-color: #2C313B; color: #fff; border-radius: 3px; position: absolute; bottom: 0px; left: 0px; padding: 20rpx; font-size: 24rpx;"> <view> 🔥 最近最热 </view> </view> </view> <view> <view style="width: 100%; height: 1rem;"></view> <view style="color: #dddddd;"> 清晰度 </view> <view style="width: 100%; height: 20rpx;"></view> <view style="width:100%; margin: 0px auto; display: flex;flex-direction: row;gap: 10px; text-align: center;"> <view style="width: 50%; background-color: #22252E;border-radius: 5px; color: #fff;"> <view style="padding: 20rpx;"> <view>标清</view> </view> </view> <view style="width: 50%; background-color: #22252E;border-radius: 5px; color: #fff;"> <view style="padding: 20rpx;"> <view>高清</view> </view> </view> </view> </view> <view> <view style="width: 100%; height: 1rem;"></view> <view style="color: #dddddd;"> 比例 </view> <view style="width: 100%; height: 20rpx;"></view> <view style=" width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px; text-align: center; "> <!-- 每项宽度23.5% (100%/4 - 间隙补偿) --> <view style="width:22%; background-color:#22252E; border-radius:5px; color:#fff;"> <view style="padding:20rpx;"> <view>1:1</view> </view> </view> <view style="width:22%; background-color:#22252E; border-radius:5px; color:#fff;"> <view style="padding:20rpx;"> <view>4:3</view> </view> </view> <view style="width:22%; background-color:#22252E; border-radius:5px; color:#fff;"> <view style="padding:20rpx;"> <view>3:4</view> </view> </view> <view style="width:22%; background-color:#22252E; border-radius:5px; color:#fff;"> <view style="padding:20rpx;"> <view>3:2</view> </view> </view> <!-- 第二行开始 --> <view style="width:22%; background-color:#22252E; border-radius:5px; color:#fff;"> <view style="padding:20rpx;"> <view>2:3</view> </view> </view> <view style="width:22%; background-color:#22252E; border-radius:5px; color:#fff;"> <view style="padding:20rpx;"> <view>9:16</view> </view> </view> <view style="width:22%; background-color:#22252E; border-radius:5px; color:#fff;"> <view style="padding:20rpx;"> <view>16:9</view> </view> </view> </view> </view> <view> <view style="width: 100%; height: 1rem;"></view> <view style="color: #dddddd;"> 张数 </view> <view style="width: 100%; height: 20rpx;"></view> <view style=" width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px; text-align: center; "> <!-- 每项宽度23.5% (100%/4 - 间隙补偿) --> <view style="width:22%; background-color:#22252E; border-radius:5px; color:#fff;"> <view style="padding:20rpx;"> <view>1张</view> </view> </view> <view style="width:22%; background-color:#22252E; border-radius:5px; color:#fff;"> <view style="padding:20rpx;"> <view>2张</view> </view> </view> <view style="width:22%; background-color:#22252E; border-radius:5px; color:#fff;"> <view style="padding:20rpx;"> <view>3张</view> </view> </view> <view style="width:22%; background-color:#22252E; border-radius:5px; color:#fff;"> <view style="padding:20rpx;"> <view>4张</view> </view> </view> </view> </view> <view style="margin: 100rpx auto;"> <view style="padding: 10rpx;"> <text style="font-size: 24rpx; color: #a8a8a8;">(3次免费/正常消耗1.5元一张)</text> </view> <view @click="generateImmediately" style="background-color: #5041F5; padding: 20rpx; border-radius: 5px; color: #FFF;text-align: center; width: 95%; margin: 0px auto;"> 立即生成</view> </view> </view> </template> <script> export default { data() { return { value2: '' } }, methods: { generateImmediately() { console.log("--- 文字风格值 ---", this.value2); } } } </script> <style> page { background-color: #171A21; } </style> 我这里 张数 、 比例 、 清晰度 可以点击选中 就是我点击然后就会有边框 还有文字和边框一样的颜色 颜色改成蓝色 默认第一开始没有选中是没有边框的 就这个到时候我点击立即生成我要拿到我这些信息 样式不变 你就加这个操作就可以
最新发布
08-06
``` <div class="crl_tq" style="display:none"> {loop $vip_money $key $row} <div class="div_l_tq_c crl_select_rd" data-rid="{$row['id']}" > {if $key == 0} <input type="hidden" name="r_id" value="{$row['id']}"> {/if} <span class="iconfont div_l_tq_iconfont default_color clr_div_l_tq" {if $key != 0} style="display: none;"{/if}></span> <span class="iconfont div_l_tq_iconfont_not clr_div_l_tq_not" {if $key == 0} style="display: none;"{/if}></span> <span class="div_l_tq_ct" style="line-height:1rem;height:1rem">{if $row['type_two']} 高级套餐:{else} 普通套餐 {/if}{$row['money']}元/ {if $row['num'] == 999} 永久 {else} {$row['num']}月 {/if} <p style="color:#d26b32">赠送会员特权:免费发帖<span style="text-decoration: underline; text-decoration-color: yellow;"> {$row['post_num']}</span>条、{if $row['type_two'] == 1 || $row['type_two'] == 2}免费刷新<span style="text-decoration: underline; text-decoration-color: yellow;">{$row['flush_num']}</span>次、 聊天消息<span style="text-decoration: underline; text-decoration-color: yellow">{$row['grp']}</span>次;{else} 免费刷新<span style="text-decoration: underline; text-decoration-color: yellow;">无限次</span>、 聊天消息<span style="text-decoration: underline; text-decoration-color: yellow">无限次</span>;{/if}</p></span> </div> {/loop} <div class="div_l" style="margin-bottom: 1rem;margin-top: 1rem;border: none; "> <button class="add_btn crl_go_vip" style="border-radius: 8px; width: 100%;height: 2.5rem;line-height: 2.5rem;font-size: 1rem"> 开通 </button> </div> </div>```代码中写法有没有错误帮我修改正确
04-03
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值