制作一个选择中国大学的弹框

图1: 效果

创新互联建站网站建设服务商，为中小企业提供成都网站设计、网站制作服务，网站设计，网站托管维护等一站式综合服务型公司，专业打造企业形象网站，让您在众多竞争对手中脱颖而出创新互联建站。

1. 数据

一共包含了全国3049所大学, 从人人网拷贝的 (仅供学习交流, 请勿用于商业项目)。

数据地址:http://files.cnblogs.com/technology/school.js. 这是一个脚本文件, 里含的JSON对象存储了学校的信息, 格式为:

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

2. 步骤

2.1 弹框的构造及弹出方式

目前弹框分为iframe和div两种形式, 在本例中我选择使用div作为弹框, 弹框的结构如下:

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");
}

function initProvince()
{
//原先的省份列表清空
$('#choose-a-province').html('');
for(i=0;i
{
$('#choose-a-province').append(''+schoolList[i].name+'');
}
//添加省份列表项的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
{
$('#choose-a-school').append(''+schools[i].name+'');
}
//添加大学列表项的click事件
$('.school-item').bind('click', function(){
var item=$(this);
var school = item.attr('school-id');
//更新选择大学文本框中的值
$('#school-name').val(item.text());
//关闭弹窗
hide();
}
);
}

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