xml:
<?xml version="1.0" encoding="utf-8" ?>
- <load>
- <department name="部门一" value="1">
<person name="热血" pwd="123" />
<person name="弱气" pwd="1" />
<person name="激情" pwd="2" />
<person name="冷静" pwd="3" />
<person name="冷酷" pwd="4" />
</department>
- <department name="部门二" value="2">
<person name="光束剑" pwd="0" />
<person name="光束配刀" pwd="1" />
</department>
- <department name="部门三" value="3">
<person name="平均型" pwd="0" />
<person name="重视攻击" pwd="1" />
<person name="重视敏捷" pwd="2" />
<person name="重视防御" pwd="3" />
<person name="重视命中" pwd="4" />
</department>
</load>html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录系统</title>
<link type="text/css" href="sytel.css" rel="stylesheet">
</style>
<script type="text/javascript" src="load.js"> </script>
</head>
<body onLoad="loadXML('department.xml'); startload(); refreshList();">
<fieldset id="Login">
<legend>登录系统</legend>
<div id="member">
<form name="form1" onSubmit="return false">
<div>
<label for="department">部 门</label>
<select name="cdepname" tabindex="0" id="cdepname" onChange="refreshList()" >
</select>
</div>
<div>
<label for="username">用户名 </label>
<select name="username" tabindex="1" id="username" >
</select>
</div>
<div>
<label for="password">密 码</label>
<input type="password" id="pwd" tabindex="2" />
</div>
<div>
<input name="Submit" type="submit" class="buttom" value="确定" onclick="CheckUser()"/>
</div>
</form>
</div>
</fieldset>js:
// 加载xml文档
var xmlDoc;
function loadXML (xmlFile)
{
// 判断浏览器类型
if(window.ActiveXObject)
{
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
else if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument('', '', null);
xmlDoc.load(xmlFile);
}
else
{
return null;
}
return xmlDoc;
}function startload ()
{
var option,optiontext;
if(xmlDoc == null)
{
alert('您的浏览器不支持xml文件读取!');
}
else
{
var DeptXML = xmlDoc.getElementsByTagName("department");
//alert(DeptXML.length);
for (var i = 0 ; i < DeptXML.length ; i ++ )
{
option = document.createElement('option');
option.setAttribute("value",DeptXML[i].getAttribute('name'));
optiontext = document.createTextNode(DeptXML[i].getAttribute('name'));
option.appendChild(optiontext);
//option.innerHTML = DeptXML[i].getAttribute('name');
document.getElementById("cdepname").appendChild(option);
}
}
}function clearList()
{
var username = document.getElementById("username");
while (username.childNodes.length >0)
{
username.removeChild(username.childNodes[0]);
}
}function refreshList ()
{
clearList();
var option,optiontext;
if(xmlDoc == null)
{
alert('您的浏览器不支持xml文件读取!');
}
else
{
var selectDep = document.form1.cdepname.options[document.form1.cdepname.selectedIndex].text;
/*var selectDep =document.getElementById("cdepname").options[document.getElementById("cdepname").options.selectedIndex].value*/
//alert(selectDep);
var DeptXML = xmlDoc.getElementsByTagName("department");
for (var i = 0 ; i < DeptXML.length ; i ++ )
{
if (DeptXML[i].getAttribute("name") == selectDep)
{
var DeptSel = DeptXML[i];
break;
}
}
for (i=0 ; i< DeptSel.childNodes.length; i++)
{
chen = new Option(DeptSel.childNodes[i].getAttribute("name"),DeptSel.childNodes[i].getAttribute("name"));
document.form1.username.options.add(chen);
}
}
}function CheckUser ()
{
//alert('sdfsadf')
if(xmlDoc == null)
{
alert('您的浏览器不支持xml文件读取!');
}
else
{
var selectDep = document.form1.cdepname.options[document.form1.cdepname.selectedIndex].text;
var DeptXML = xmlDoc.getElementsByTagName("department");
for (var i = 0 ; i < DeptXML.length ; i ++ )
{
if (DeptXML[i].getAttribute("name") == selectDep)
{
var DeptSel = DeptXML[i];
break;
}
}
var selectPer = document.form1.username.options[document.form1.username.selectedIndex].text;
for (i=0 ; i< DeptSel.childNodes.length; i++)
{
if (DeptSel.childNodes[i].getAttribute("name") == selectPer)
{
if (DeptSel.childNodes[i].getAttribute("pwd") == document.getElementById("pwd").value)
{
//alert('登陆成功！');
document.getElementById("loadDiv").style.display = "";
document.getElementById("Login").style.display ="none";
setTimeout("self.location='Forum.html'",2000);
break;
}
else
{
alert('密码错误！');
break;
}
}
}
}
}
body
{
background: #FFF;
font-family: Arial, Helvetica, sans-serif;
color: #666666;
padding: 0px;
margin: 5px;
text-align: center;
font-size: 15px;
}form
{
margin: 0px;
padding: 4px;
}fieldset
{
border: 1px solid #3f6b21;
width: 310px;
margin: 0px auto 0px auto;
}legend
{
font-size: 25px;
background-color:#F1F1F1;
}#member
{
width: 300px;
background: #F1F1F1;
text-align: center;
margin: 20px auto;
}label
{
width: 45px;
padding: 3px 0px 1px;
color: #666;
font-size: 15px;
text-align: right;
}
select
{
border: 1px solid #CCC;
margin: 1px;
padding: 1px;
font-size: 15px;
color: #666;
width:150px;
height:25px;
}input
{
border: 1px solid #CCC;
margin: 1px;
padding: 1px;
color: #666;
width:146px;
height:20px;
}.buttom
{
width: 60px;
height: 25px;
color: #333;
border: solid 1px #CCC;
background: #FBFBFB;
}