制作一个选择中国大学的弹框 (数据、步骤、代码)
图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及下载
大 学:
选择学校
作者:Create Chen
出处:http://technology.cnblogs.com
说明:文章为作者平时里的思考和练习,可能有不当之处,请博客园的园友们多提宝贵意见。
本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂