推荐一个选择中国大学的弹框 (详细步骤及数据)

效果图：

demo下载

1. 数据

一共包含了全国3049所大学。

数据文件：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作为弹框, 弹框的结构如下:

<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>    弹框初始状态下为隐藏状态(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");}

转载自:http://www.9958.pw/post/js_school_plugins