freemarker二级联动

最新推荐文章于 2021-06-05 20:02:44 发布

原创最新推荐文章于 2021-06-05 20:02:44 发布 · 1.7k 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用Freemarker模板引擎与JavaScript进行数据交互的例子，展示了如何将服务器端的数据动态地填充到HTML选项中，并通过JavaScript事件监听实现表单的选择更新。这个例子涉及Freemarker模板语法、JavaScript DOM操作以及数据处理。

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

<#assign basePath="" />
<#assign xdttclist=xdttclist>
<#assign xdttclistTwo=xdttclistTwo>

<div class="first">
    <div>
  		选择表:<select id="exportOne" onchange="cg1()">
    	            <#list xdttclist as xd>
		                <option>${xd.tables}</option>
		            </#list>
		       </select><br>
		选择字段:<select id="exportTwo"> 
		 </select>
	</div>
</div>
 <div class="second">
		<div>
  		 选择表:<select id="importOne" onchange="cg1()">
    	            <#list xdttclistTwo as xdt>
				        <option>${xdt.tables}</option>
		            </#list>
		        </select><br>
		 选择字段:<select id="importTwo"> 
		 </select>
	</div>
</div>

var s1 = document.getElementById("exportOne");
var s2 = document.getElementById("exportTwo");
var s3 = document.getElementById("importOne");
var s4 = document.getElementById("importTwo");
var stationList = [];
var stationListTwo = []; 
function y(){
	 //获取二机组织信息
	 <#if xdttclist??>
	 	//一级组织
	 	<#list xdttclist as firstOrg>
	 		var station = new Object();
	 		station.tables = "${firstOrg.tables}";
	 		var areaList = [];
	 		//二级组织
	 		<#list firstOrg.columns as secondOrg>
	 			var secondOrg = new Object();
	 			secondOrg.name = "${secondOrg}";
	 			areaList.push(secondOrg);
	 			station.areaList = areaList;
	 		</#list>
	 		stationList.push(station);
	 	</#list>
	 </#if>
}; 

 function y2(){
	 //获取二级信息
	 <#if xdttclistTwo??>
	 	//一级组织
	 	<#list xdttclistTwo as firstOrgTwo>
	 		var stationTwo = new Object();
	 		stationTwo.tables = "${firstOrgTwo.tables}";
	 		var areaListTwo = [];
	 		//二级组织
	 		<#list firstOrgTwo.columns as secondOrgTwo>
	 			var secondOrgTwo = new Object();
	 			secondOrgTwo.name = "${secondOrgTwo}";
	 			areaListTwo.push(secondOrgTwo);
	 			stationTwo.areaListTwo = areaListTwo;
	 		</#list>
	 		stationListTwo.push(stationTwo);
	 	</#list>
	 	alert(stationListTwo.length);
	 </#if>
};  

function cg1(){
	var index = s1.selectedIndex;
	var indexTwo = s3.selectedIndex;
	var arrx = stationList[index];
	var arrxTwo = stationListTwo[indexTwo];
	s2.innerHTML = "";
	s4.innerHTML = "";
	for(var i = 0 ; i < arrx.areaList.length;i++){
		var text = arrx.areaList[i].name;
		
		s2.add(new Option(text,text)); 
	} 
	 for(var j = 0 ; j < arrxTwo.areaListTwo.length;j++){
		var textTwo = arrxTwo.areaListTwo[j].name;
		s4.add(new Option(textTwo,textTwo)); 
	}  
}
y();
y2();
cg1();