<!DOCTYPE HTML>
<html>
<head>
<title>选择大学</title>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
<script src="school.js" type="text/javascript"></script>
</head>
<body>
<h3>选择大学:<input type="text" name="school" id="school-name" value="请选择大学" onclick="pop()"></h3>
<div id="choose-box-wrapper">
<div id="choose-box">
<div id="choose-box-title">
<span>选择学校</span>
</div>
<div id="choose-a-province">
</div>
<div id="choose-a-school">
</div>
<div id="choose-box-bottom">
<input type="botton" onclick="hide()" value="关闭" />
</div>
</div>
</div>
<script type="text/javascript">
if(!document.getElementsByClassName){
document.getElementsByClassName = function(className, element){
var children = (element || document).getElementsByTagName('*');
var elements = new Array();
for (var i=0; i<children.length; i++){
var child = children[i];
var classNames = child.className.split(' ');
for (var j=0; j<classNames.length; j++){
if (classNames[j] == className){
elements.push(child);
break;
}
}
}
return elements;
};
}
//弹出窗口
function pop(){
//将窗口居中
makeCenter();
//初始化省份列表
initProvince();
//默认情况下, 给第一个省份添加choosen样式
var aTags = document.getElementsByTagName('a');
for(i=0;i<aTags.length;i++){
if(aTags[i].getAttribute('province-id')=='1'){
aTags[i].setAttribute('class', aTags[i].getAttribute('class')+' choosen');
break;
}
}
//初始化大学列表
initSchool(1);
}
//隐藏窗口
function hide()
{
document.getElementById('choose-box-wrapper').style.display='none';
}
function initProvince()
{
//原先的省份列表清空
document.getElementById('choose-a-province').innerHTML='';
for(i=0;i<schoolList.length;i++)
{
var ele = document.getElementById('choose-a-province')
var newHtml = '<a class="province-item" province-id="'+schoolList[i].id+'">'+schoolList[i].name+'</a>';
ele.innerHTML+=newHtml;
}
//添加省份列表项的click事件
var items = document.getElementsByClassName('province-item');
for(i=0;i<items.length;i++){
items[i].onclick=function(){
var province = this.getAttribute('province-id');
var nodes = this.parentNode.childNodes;
for(j=0;j<nodes.length;j++){
nodes[j].setAttribute('class', 'province-item');
}
this.setAttribute('class', 'province-item choosen');
initSchool(province);
}
}
}
function initSchool(provinceID)
{
//原先的学校列表清空
var ele = document.getElementById('choose-a-school');
ele.innerHTML='';
var schools = schoolList[provinceID-1].school;
for(i=0;i<schools.length;i++)
{
var newHtml = '<a class="school-item" school-id="'+schools[i].id+'">'+schools[i].name+'</a>';
ele.innerHTML+=newHtml;
}
//添加大学列表项的click事件
var items = document.getElementsByClassName('school-item');
for(i=0;i<items.length;i++){
items[i].onclick = function(){
var school = this.getAttribute('school-id');
document.getElementById('school-name').value=this.innerText;
//关闭弹窗
hide();
}
}
}
function makeCenter()
{
var ele = document.getElementById('choose-box-wrapper');
ele.style.display='block';
}
</script>
<style type="text/css">
#choose-box-wrapper{
width: 652px;
height: 362px;
position:absolute;
top:50%;left:50%;
margin-left:-336px;
margin-top:-191px;
background:url(school_bg.gif) ;
padding:10px;
border-radius:5px;
display:none;
}
#choose-box{
filter: alpha(opacity=100);
border: 1px solid #005EAC;
width:650px;
background-color:white;
}
#choose-box-title{
background:#3777BC;
color: white;
padding: 4px 10px 5px;
font-size: 14px;
font-weight: 700;
margin: 0;
}
#choose-box-title span{
font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;
}
#choose-a-province, #choose-a-school{
margin:5px 8px 10px 8px;
border: 1px solid #C3C3C3;
}
#choose-a-province a{
display:inline-block;
height: 18px;
line-height: 18px;
color:#005EAC;
text-decoration: none;
font-size: 9pt;
font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;
margin:2px 5px;
padding: 1px;
text-align: center;
}
#choose-a-province a:hover{
text-decoration:underline;
cursor:pointer;
}
#choose-a-province .choosen{
background-color: #005EAC;
color:white;
}
#choose-a-school{
overflow-x: hidden;
overflow-y: auto;
height: 200px;
}
#choose-a-school a{
height: 18px;
line-height: 18px;
color:#005EAC;
text-decoration: none;
font-size: 9pt;
font-family: Tahoma, Verdana, STHeiTi, simsun, sans-serif;
float: left;
width: 170px;
margin: 4px 12px;
padding-left:10px;
background:url(school_bg.gif) no-repeat 0 9px;
}
#choose-a-school a:hover{
background-color:#005EAC;
color:white;
cursor:pointer;
}
#choose-box-bottom{
background: #F0F5F8;
padding: 8px;
text-align: right;
border-top: 1px solid #CCC;
height:40px;
}
#choose-box-bottom input{
vertical-align: middle;
text-align: center;
background-color:#005EAC;
color:white;
border-top: 1px solid #B8D4E8;
border-left: 1px solid #B8D4E8;
border-right: 1px solid #114680;
border-bottom: 1px solid #114680;
cursor: pointer;
width: 60px;
height: 25px;
margin-top: 6px;
margin-right: 6px;
line-height:25px;
}
</style>
</body>
</html>
School 2.0.zip （3个子文件） 
school.js 317KB
school_bg.gif 45B
School.html 6KB资源评论
yanglingmin07142015-07-06本资源适合初学者- q3345308702016-01-21不错，可以使用~
- 不到ddl不会干活2015-04-21之前下的 有一定参考价值。
笨鸟先飞PHP2017-05-19效果还行吧 不过比较老效果了
u010225237
- 粉丝: 0
- 资源: 8
最新资源
- 微信小程序字典查询作品
- 航空车辆检测7-YOLO（v7至v9）、COCO、CreateML、Darknet、Paligemma、VOC数据集合集.rar
- 微信小程序100个案例
- 人工智能基础 AI实验基于产生式的动物识别专家系统
- 航空船、车辆、飞机检测5-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar
- pymssql-2.1.4.dev5-cp37-cp37m-win-amd64.whl pymssql-2.1.4.dev5-cp37-cp37m-win32.whl
- 第5章 阶段案例 开发文档.pdf
- 航空船、车辆、飞机检测4-YOLO（v5至v11）、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar
- 太原理工tyut-数据库真题
- 奇安信浏览器安装包下载地址
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
