A pop-up box for selecting Chinese universities based on jquery (data, steps, code)

A pop-up box for selecting Chinese universities based on jquery (data, steps, code)_jquery

WBOY

Release： 2016-05-16 17:51:32

Original

1155 people have browsed it

1. The data
contains a total of 3049 universities across the country. It was copied from Renren (for learning and exchange only, please do not use it for commercial projects). This is a script file. The JSON object contained in it stores the school information. , the format is:

Copy code The code is as follows:

 
var schoolList=[ 
{ 
"id":1, //Province id 
"school": [ 
{ 
"id": 1001, //School id 
"name": "u6e05u534eu5927u5b66" // School name 
} 
/.... 
], //Schools in this province 
"name": "u5317u4eac" 
}, 
//... 
]; 

2. Steps
2.1 The structure and pop-up method of the pop-up frame
Currently the pop-up frame is divided into two forms: iframe and div. In this example, I choose to use div as Pop-up frame, the structure of the pop-up frame is as follows:

Copy code The code is as follows:

Choose school

The pop-up box is initially hidden ( display:none), for the sake of user experience, after the user triggers the time to open the pop-up box, the pop-up box should be displayed in the center of the page. Use the following piece of code to achieve the centering effect:

Copy code The code is as follows:

 
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 Load province list and school list
When the pop-up box pops up for the first time, it defaults to the first province in the list. After loading all the lists of this province, a click function needs to be bound to each item. After the user clicks, the user's selection is updated. List of universities in the province.
After updating the list of universities in the province, a click function must also be bound to each item. The user can perform corresponding operations after selecting the university. (For example, to a text box Fill in the value, page redirect etc.)

Copy code The code is as follows:

function initProvince( )
{
//Clear the original province list
$('#choose-a-province').html('');
for(i=0;i{
$('#choose-a-province').append('');
}
//Add the click event of the province list item
$('.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');
//Update college list
initSchool (province);
}
);
}
function initSchool(provinceID)
{
//Clear the original school list
$('#choose-a- school').html('');
var schools = schoolList[provinceID-1].school;
for(i=0;i{
$ ('#choose-a-school').append('' schools[i].name '< /a>');
}
//Add the click event of the university list item
$('.school-item').bind('click', function(){
var item =$(this);
var school = item.attr('school-id');
//Update the value in the select university text box
$('#school-name').val (item.text());
//Close the pop-up window
hide();
}
);
}

2.3 Pop-up and hidden windows
In this example, the user clicks on a text box that requires the school to be entered, and a pop-up box pops up on the page. The pop-up box contains a close button, which can close the pop-up box.

Copy the code The code is as follows:

 
//Pop-up window
function pop(){ 
//Center the window
makeCenter(); 
//Initialize the province list
initProvince(); 
//By default, add the choosen style to the first province
$('[province-id="1"]').addClass('choosen'); 
//Initialize the university list
initSchool(1); 
} 
//Hide window
function hide() 
{ 
$('#choose-box-wrapper').css("display"," none"); 
} 

3. DEMO and download
http://demo.jb51.net/js/2012/jquery_school/
Download: jquery_school.rar