首先先写一个xml的配置文件,放置要读取的消息,
然后再联动页面通过js或者jquery来读取消息;
我的xml文件:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd">
<Clazz>
<className name="两班倒">
<classTime>早(08:00-20:00)</classTime>
<classTime>晚(20:00-08:00)</classTime>
</className>
<className name="三班倒">
<classTime>早(00:00-08:00) </classTime>
<classTime>中(08:00-16:00)</classTime>
<classTime>晚(16:00-00:00)</classTime>
</className>
<className name="四班三倒">
<classTime>早(00:00-08:00)</classTime>
<classTime>中(08:00-16:00)</classTime>
<classTime>晚(16:00-00:00)</classTime>
<classTime>休</classTime>
</className>
</Clazz>
jsp页面:(内含js代码)
其中xml文件的解析可以通过$.get("xxx.xml")或$.post("xxx.xml")来写;
js代码也可以通过jquery来写比较简单。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>Insert title here</title>
<script type="text/javascript">
window.οnlοad=function(){
//获取到变化的班次的值
document.getElementById("clazzName").οnchange=function(){
var clazzValue=this.value;
//alert(clazzValue);
//清空时间下拉框中的值,保留第一行
var timeSelect=document.getElementById("clazzTime");
var optionTimes=timeSelect.getElementsByTagName("option");
//从后往前删除
for(var i=optionTimes.length-1;i>0;i--){
timeSelect.removeChild(optionTimes[i]);
}
//解析班次的xml文件
var xmlDom=parseXml("clazz.xml");
var xmlClazzElements=xmlDom.getElementsByTagName("className");
//alert(xmlClazzElements.length);
var clazzElement=null;
//获取xml文件中班次的值
for(var i=0;i<xmlClazzElements.length;i++){
var xmlClazzElement=xmlClazzElements[i];
var clazzElementValue=xmlClazzElement.getAttribute("name");
//alert(clazzElementValue);
if(clazzElementValue==clazzValue){
clazzElement=xmlClazzElement;
break;
}
}
if(clazzElement!=null){
var classTimeElements=clazzElement.getElementsByTagName("classTime");
//alert(classTimeElements.length);
for(var i=0;i<classTimeElements.length;i++){
var calssTimeValue=classTimeElements[i].firstChild.nodeValue;
//alert(calssTimeValue);
var optionElement=document.createElement("option");
optionElement.setAttribute("value",calssTimeValue);
var optionTextNode=document.createTextNode(calssTimeValue);
optionElement.appendChild(optionTextNode);
//alert(optionElement);
timeSelect.appendChild(optionElement);
}
}
}
}
//解析xml文件
function parseXml(fileName){
try{
var xmlDoc=new ActiveXObject("Microsoft.xmlDom");
}catch(e){
try{
var xmlDoc=document.implementation.createDocument("","",null);
}catch(e){
}
}
xmlDoc.async=false;
xmlDoc.load(fileName);
return xmlDoc;
}
</script>
</head>
<body>
<div>
<h1>二级联动选择班次</h1>
<select name="clazzName" id="clazzName">
<option value="">--请选择班次--</option>
<option value="两班倒">两班倒</option>
<option value="三班倒">三班倒</option>
<option value="四班三倒">四班三倒</option>
</select>
<select name="clazzTime" id="clazzTime">
<option value="">--请选择时间段--</option>
</select>
</div>
</body>
</html>
效果如图,当点击两班倒时时间段下拉选自动值为早晚,点击四班三倒时时间段下拉选值自动为早.....