jsp页面数据回显(select下拉选择框)

我的个人博客开通了,地址:https://timewentby.com 欢迎访问

1。静态变量方式:

<!-- 
 实现select标签回显 
-->  
1.<select name="curStatus"  value="${curStatus}">     
  <option value="0">-请选择-</option>     
  <option value="1" <c:if test="${'1' eq curStatus}">selected</c:if> >男</option>     
  <option value="2" <c:if test="${'2' eq curStatus}">selected</c:if> >女</option>  
 </select>  

2。动态方式:两个变量都来自后台

<c:set  var="schoolid" value="${pageData.SchoolId}" scope="request"/>

<select name="schoolId" id="schoolId" style="width: 95%">
							<option value="0">==请选择==</option>
							
							<c:forEach items="${organizeList}" var="var" varStatus="vs">
								<option value="${var.name_code}" <c:if test="${var.name_code==schoolid}">selected</c:if> > ${var.name}</option>
							</c:forEach>
						</select>

说明一下:若是想2那种,实质上是比较两个对象的属性值,不能写成如下:

<select name="schoolId" id="schoolId" style="width: 95%">
							<option value="0">==请选择==</option>
							
							<c:forEach items="${organizeList}" var="var" varStatus="vs">
								<option value="${var.name_code}" <c:if test="${var.name_code==pageData.SchoolId}">selected</c:if> > ${var.name}</option>
							</c:forEach>
						</select>
若要在前端使用JavaScript的`select`多选实现数据回显,通常是在HTML页面上设置好`<select>`元素,并关联一个数组或JSON对象来存储预设选项及其对应的值。当你需要从服务器获取到数据并更新多选选择状态时,可以按照以下步骤操作: 1. **HTML结构**: ```html <select id="mySelect" multiple> <!-- 服务器返回的数据动态生成 --> </select> ``` 2. **JavaScript处理**: ```javascript // 假设你有一个包含选项值和标题的对象数组 var optionsData = [ { value: 'option1', text: '选项一' }, { value: 'option2', text: '选项二' }, // ...其他选项 ]; // 获取select元素 var selectElement = document.getElementById('mySelect'); // 渲染初始数据 optionsData.forEach(function(option) { var optionElement = document.createElement('option'); optionElement.value = option.value; optionElement.text = option.text; selectElement.appendChild(optionElement); }); // 如果有服务器返回的数据,更新选中项 function updateSelection(serverData) { serverData.forEach(function(selectedValue) { if (Array.prototype.includes.call(selectElement.options, selectedValue)) { selectElement.options[selectElement.options.selectedIndex] = selectedValue; // 设置已选中项 } }); } // 假设你有一个获取服务器数据的函数 fetchServerData().then(updateSelection); ``` 3. **相关问题--:** - 怎么样在用户手动选择后将数据发送到服务器? - 如何防止用户清除回显后的选中项? - 使用了双向绑定的情况下,如何保持数据同步?
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值