脚本宝典收集整理的这篇文章主要介绍了js实例教程-基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

1. 数据
一共包含了全国3049所大学, 从人人网拷贝的 (仅供学习交流, 请勿用于商业项目), 这是一个脚本文件, 里含的JSON对象存储了学校的信息, 格式为:

代码如下:

var schoolList=[
{
"id":1, //省份id
"school": [
{
"id": 1001, //学校id
"name": "/u6e05/u534e/u5927/u5b66" //学校名称
}
/....
], //这个省的学校
"name": "/u5317/u4eac"
},
//...
];

2. 步骤
2.1 弹框的构造及弹出方式
目前弹框分为iframe和p两种形式, 在本例中我选择使用p作为弹框, 弹框的结构如下:

. 代码如下:

<p id="choose-box-wrapper">
<p id="choose-box">
<p id="choose-box-title">
<span>选择学校</span>
</p>
<p id="choose-a-province">
</p>
<p id="choose-a-school">
</p>
<p id="choose-box-bottom">
<input type="botton" onclick="hide()" value="关闭" />
</p>
</p>
</p>

弹框初始状态下为隐藏状态(display:none), 为了用户体验, 在用户触发打开弹框时间后, 弹框应该在页面中呈居中显示, 使用下面一段代码可以实现居中效果:

. 代码如下:

function makeCenter()
{
$('#choose-box-wrapper').css("display","block");
$('#choose-box-wrapper').css("position","absolute");
$('#choose-box-wrapper').css("top", Math.max(0, (($(window).height() - $('#choose-box-wrapper').outerHeight()) / 2) + $(window).scrollTop()) + "px");
$('#choose-box-wrapper').css("left", Math.max(0, (($(window).width() - $('#choose-box-wrapper').outerWidth()) / 2) + $(window).scrollLeft()) + "px");
}

2.2 加载省份列表和学校列表
在第一次跳出弹框时, 默认为列表中的第一个省份. 加载完这个省份所有的名单后, 给每一项都需要绑定一个click函数, 用户在发生单击后, 更新用户选择省份下的大学列表.
更新完该省的大学列表后, 同样要给每一项都绑定一个click函数, 用户在选择该大学后可以执行相应的操作. (比如给某个文本框填值, 页面重定向etc.)

. 代码如下:

function initProvince()
{
//原先的省份列表清空
$('#choose-a-province').html('');
for(i=0;i<schoolList.length;i++)
{
$('#choose-a-province').append('<a class="province-item" province-id="'+schoolList[i].id+'">'+schoolList[i].name+'</a>');
}
//添加省份列表项的click事件
$('.province-item').bind('click', function(){
var item=$(this);
var province = item.attr('province-id');
var choosenItem = item.parent().find('.choosen');
if(choosenItem)
$(choosenItem).removeClass('choosen');
item.addClass('choosen');
//更新大学列表
initSchool(province);
}
);
}
function initSchool(provinceID)
{
//原先的学校列表清空
$('#choose-a-school').html('');
var schools = schoolList[provinceID-1].school;
for(i=0;i<schools.length;i++)
{
$('#choose-a-school').append('<a class="school-item" school-id="'+schools[i].id+'">'+schools[i].name+'</a>');
}
//添加大学列表项的click事件
$('.school-item').bind('click', function(){
var item=$(this);
var school = item.attr('school-id');
//更新选择大学文本框中的值
$('#school-name').val(item.text());
//关闭弹窗
hide();
}
);
}

2.3 弹出及隐藏窗口
在本例中, 用户点击一个要求输入学校的文本框, 页面跳出弹框. 弹框中含有关闭按钮, 可以关闭弹框.

. 代码如下:

//弹出窗口
function pop(){
//将窗口居中
makeCenter();
//初始化省份列表
initProvince();
//默认情况下, 给第一个省份添加choosen样式
$('[province-id="1"]').addClass('choosen');
//初始化大学列表
initSchool(1);
}
//隐藏窗口
function hide()
{
$('#choose-box-wrapper').css("display","none");
}

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！&nbsp;js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)全部内容，希望文章能够帮你解决js实例教程-基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。