A selection of the frame (data, steps, code) of the Chinese university based on the implementation of jquery _jquery

1. Data
Contains a total of 3049 universities nationwide, copied from Renren (for learning exchanges only, not for commercial projects), a script file containing JSON objects that store school information in the form of:

Copy Code code as follows:

var schoollist=[
{
"id": 1,//province ID
"School": [
{
"id": 1001,//school ID
"Name": "\U6E05\U534E\U5927\U5B66"//School Name
}
/....
]//The school in this province
' Name ': ' \U5317\U4EAC '
},
//...
];

2. Steps
2.1 Frame structure and pop-up mode
The current frame is divided into two kinds of iframe and Div, in this case I choose to use div as a frame, the structure of the frame is as follows:

Copy Code code as follows:

<div id= "Choose-box-wrapper" >
<div id= "Choose-box" >
<div id= "Choose-box-title" >
<span> Select School </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= "Close"/>
</div>
</div>
</div>

Frame in the initial state of the hidden State (Display:none), for the user experience, after the user triggered open the frame time, the frame should be displayed in the center of the page, use the following section of code to achieve the center effect:

Copy Code code 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 Loading Provinces list and school list
The default is the first province in the list when you jump out of the frame for the first time. After loading all the lists in this province, you need to bind a click function to each item, and after the user clicks, the user updates the university list under the province.
Once you have updated the list of universities in the province, you also have to bind a click function to each item, and the user can perform the appropriate action after selecting the university. (for example, fill in a text box value, page redirect etc.)

Copy Code code as follows:

function Initprovince ()
{
Original list of provinces emptied
$ (' #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> ');
}
Add Click event for 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 University List
Initschool (province);
}
);
}
function Initschool (Provinceid)
{
The original school list emptied
$ (' #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> ');
}
Add a click event for a university list item
$ ('. School-item '). Bind (' click ', function () {
var item=$ (this);
var school = item.attr (' School-id ');
Update the values in the Select University text box
$ (' #school-name '). Val (Item.text ());
Close the window.
Hide ();
}
);
}

2.3 Pop-up and hidden windows
In this case, the user clicks on a request to enter the school text box, and the page jumps out of the frame. The frame contains a close button to turn off the bomb frame.

Copy Code code as follows:

Pop-up window
function Pop () {
Center the Window
Makecenter ();
Initialize List of Provinces
Initprovince ();
By default, add a choosen style to the first province
$ (' [province-id= ' 1] '). addclass (' choosen ');
Initialize 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