jeesite实战(十)——如何通过js动态清除对象选择器的内容

系列文章目录

---

---

前言

本系列文章主要记录项目过程中重点的项目技术

---

一、目标

当A对象选择器的内容发生改变的时候，会清除B选择器的内容，如下图

二、实现目标

1.实现步骤

实现步骤：
1.在隧道选择器的div中添加一个隐藏字段，id为tempId,如<#form:hidden path=“tempId”/>
2.编写两个函数，callbackFuncName属性表示对象选择器的内容返回后调用，getSelectDataFuncName属性表示对象选择器弹窗页面之前调用
3.getSelectDataFuncName属性对应的函数设置tempId的值与tunnelCode相同
4.callbackFuncName属性对应的函数判断tunnelCode的值前后是否有变化

2.主要HTML代码

<div class="col-xs-6">
	<div class="form-group">
		<label class="control-label col-sm-4" title=""> 
		<span class="required hide">*</span> ${text('隧道选择')}：<i class="fa icon-question hide"></i></label>
		<div class="col-sm-8">
			<#form:listselect id="tunnel" title="隧道选择" path="tunnelId" labelPath="tunnel.name" 
			url="${ctx}/lbst/subsectionStation/tunnelSelect"  allowClear="true"  checkbox="false"  itemCode="id"
				itemName="name" callbackFuncName="callMsg()" getSelectDataFuncName="changeData()"   class="required " />
				<#form:hidden path="tempId"/>
		</div>
	</div>
 </div>
 <div class="col-xs-6">
	<div class="form-group">
		<label class="control-label col-sm-4" title=""> 
		<span class="required hide">*</span> ${text('隧道分段选择')}：<i class="fa icon-question hide"></i></label>
		<div class="col-sm-8">
			<#form:listselect id="subsection" title="隧道分段选择" path="subsectionId"  labelPath="subsection.subsectionCode" 
			url="${ctx}/lbst/subsectionStation/subsectionSelect"  allowClear="true"  checkbox="false"  itemCode="id"
				itemName="subsectionCode" getSelectDataFuncName="updateSusectionURL()"  
				class="required " />
		</div>
	</div>
 </div>

3.主要JS代码

var changeData = function(){
	var tempValue = $("#tunnelCode").val();
	if(tempValue==null){
		
	}else{
		$("#tempId").val(tempValue);
	}
	
	
}

var callMsg = function(){
	var tempId = $("#tempId").val();
	var tempValue = $("#tunnelCode").val();
	//判断隧道输入框是否有值
	if(tempId !=null){
		//判断隧道的值是否发生改变
		if(tempId==tempValue){
			
		}else{
			//如果发生改变
			$("#subsectionCode").val("");
			$("#subsectionName").val("");
		}
	}
	
}

---

总结

至此，本文章结束