制作一个选择中国大学的弹框 (数据、步骤、代码)

图1: 效果

1. 数据

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var schoolList=[
    {
        "id":1, //省份id
        "school": [
            {
                "id": 1001, //学校id
                "name": "\u6e05\u534e\u5927\u5b66" //学校名称
            }
            /....
            ], //这个省的学校
        "name": "\u5317\u4eac"
    },
    //...
];

2. 步骤

2.1 弹框的构造及弹出方式

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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), 为了用户体验, 在用户触发打开弹框时间后, 弹框应该在页面中呈居中显示, 使用下面一段代码可以实现居中效果:

1
2
3
4
5
6
7
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.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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 弹出及隐藏窗口

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//弹出窗口
function pop(){
    //将窗口居中
    makeCenter();
 
    //初始化省份列表
    initProvince();
 
    //默认情况下, 给第一个省份添加choosen样式
    $('[province-id="1"]').addClass('choosen');
 
    //初始化大学列表
    initSchool(1);
}
//隐藏窗口
function hide()
{
    $('#choose-box-wrapper').css("display","none");
}

3. DEMO及下载

        大   学:
选择学校
 
 

       

posted @   Create Chen  阅读(11044)  评论(50编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
点击右上角即可分享
微信分享提示