├── README.md ├── chinaCitySelect ├── chinaCitySelect.js ├── chinaCitySelect.html └── chinaCityList.js ├── majorSelect ├── majorSelect.html ├── majorSelect.js └── majorList.js └── universitySelect ├── chinaUniversitySelect.html └── chinaUniversitySelect.js /README.md: -------------------------------------------------------------------------------- 1 | ##js表单选择中国大学、大学专业、中国省市区三级联动 2 | 3 | 4 | [TOC] 5 | 6 | 由于做了几个教育网站,经常跟大学、专业报名、考生籍贯等信息打交道,把网站常用的中国大学js选择、大学专业js选择等资源共享。 7 | 8 | ###json信息库 9 | 10 | **大学信息json库**:`universitySelect/chinaUniversityList.js` 11 | 12 | 由于业务没有扩展到国际~~~目前只有中国的大学 13 | 14 | **大学专业json库**:`majorSelect/majorList.js` 15 | 16 | 手工从51job上复制、目前只有本科专业,没有专科专业信息。 17 | 18 | **省市区县地方信息库**: `chinaCitySelect/chinaCityList.js` 19 | 20 | ###jquery操作表单联动 21 | 22 | 文件夹中各有一个`*Select.js`、都是简单的js操作,注释写的比较全。可以按照自己的要求修改 23 | 24 | ###例子 25 | 26 | 如果需要对例子中提供的模板样式修改,建议根据json信息库,重新自己写js。 27 | 28 | 样式都是统一的~ 29 | 30 | ![大学](http://ww1.sinaimg.cn/bmiddle/005ItG0Rjw1er918dsr1tj310q0mgahs.jpg) 31 | 32 | ![地区](http://ww3.sinaimg.cn/bmiddle/005ItG0Rjw1er915yjq9fj310u0nstfq.jpg) 33 | 34 | ![专业](http://ww3.sinaimg.cn/bmiddle/005ItG0Rjw1er912q3nyjj30zu0pgdna.jpg) 35 | 36 | github地址:https://github.com/yidiandianlan/openSelect/ -------------------------------------------------------------------------------- /chinaCitySelect/chinaCitySelect.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | 3 | var event = { 4 | 5 | init : function(){ 6 | this.select(); 7 | this.close(); 8 | }, 9 | makeCenter : function(){ 10 | $('#choose-box-wrapper').css("display","block"); 11 | $('#choose-box-wrapper').css("position","absolute"); 12 | $('#choose-box-wrapper').css("top", Math.max(0, (($(window).height() - $('#choose-box-wrapper').outerHeight()) / 2) + $(window).scrollTop()) + "px"); 13 | $('#choose-box-wrapper').css("left", Math.max(0, (($(window).width() - $('#choose-box-wrapper').outerWidth()) / 2) + $(window).scrollLeft()) + "px"); 14 | }, 15 | initProvince : function(){ 16 | //原先的省份列表清空 17 | $('#choose-a-province').html(''); 18 | for(var i=0;i'+chinaCityList['0'][i]+''); 21 | } 22 | //添加省份列表项的click事件 23 | $('.province-item').bind('click', function(){ 24 | var item=$(this); 25 | var province = item.attr('province-id'); 26 | var choosenItem = item.parent().find('.choosen'); 27 | if(choosenItem){ 28 | $(choosenItem).removeClass('choosen'); 29 | } 30 | 31 | item.addClass('choosen'); 32 | //更新市 33 | event.initCity(province); 34 | }); 35 | //默认点击第一个省 36 | $($('.province-item')[0]).trigger('click'); 37 | }, 38 | initCity : function(province){ 39 | $('#choose-a-city').html(''); 40 | for(var i=0;i'+chinaCityList[province][i]+''); 43 | } 44 | //添加市列表项的click事件 45 | $('.city-item').bind('click', function(){ 46 | var item=$(this); 47 | var city = item.attr('city-id'); 48 | var choosenItem = item.parent().find('.choosen'); 49 | if(choosenItem){ 50 | $(choosenItem).removeClass('choosen'); 51 | } 52 | 53 | item.addClass('choosen'); 54 | //更新市 55 | event.initTown(city); 56 | }); 57 | //默认点击第一个市 58 | $($('.city-item')[0]).trigger('click'); 59 | }, 60 | initTown : function(city){ 61 | $('#choose-a-town').html(''); 62 | 63 | for(var i=0;i'+chinaCityList[city][i]+''); 66 | } 67 | //添加县区列表项的click事件 68 | $('.town-item').bind('click', function(){ 69 | var item=$(this); 70 | var city = item.attr('town-id'); 71 | var areaArray = city.split('_'); 72 | $('#province').val(chinaCityList[areaArray[0]][areaArray[1]]); 73 | $('#city').val(chinaCityList[areaArray[0]+'_'+areaArray[1]][areaArray[2]]); 74 | $('#town').val(item.text()); 75 | $('#choose-box-wrapper').css("display","none"); 76 | }); 77 | }, 78 | select : function(){ 79 | $('#select').click(function(){ 80 | //将窗口居中 81 | event.makeCenter(); 82 | 83 | //初始化省份列表 84 | event.initProvince(); 85 | }); 86 | }, 87 | close : function(){ 88 | $('#close').focus(function(){ 89 | $('#choose-box-wrapper').css("display","none"); 90 | }); 91 | } 92 | 93 | }; 94 | event.init(); 95 | 96 | }); -------------------------------------------------------------------------------- /majorSelect/majorSelect.html: -------------------------------------------------------------------------------- 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 | 128 | 129 | -------------------------------------------------------------------------------- /universitySelect/chinaUniversitySelect.html: -------------------------------------------------------------------------------- 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 | 128 | 129 | -------------------------------------------------------------------------------- /chinaCitySelect/chinaCitySelect.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | chinaCity选择 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 |