二级联动选择框

来源：互联网发布：windows7安装mac os x 编辑：程序博客网时间：2024/05/16 16:17

首先先写一个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.onload=function(){
       //获取到变化的班次的值
       document.getElementById("clazzName").onchange=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>

效果如图，当点击两班倒时时间段下拉选自动值为早晚，点击四班三倒时时间段下拉选值自动为早.....

阅读全文

0 0