JS Click on the pop-up layer to choose the Chinese University of the bomb frame

The effect of the following figure

Code

1. Data

Altogether contained 3049 universities of the country.

Data files: http://file.111cn.net/upload/2014/4/school.js

This is a script file containing the JSON object that stores the school's information in the form:

The code is as follows	Copy Code
var schoollist=[ { "id": 1,//province ID "School": [ { "id": 1001,//school ID "Name": "U6E05U534EU5927U5B66"//School Name } /.... ]//The school in this province ' Name ': ' U5317U4EAC ' }, //... ];

2. Steps

The structure of the

2.1 frame and pop-up mode the current frame is divided into IFrame and div two forms, in this case I choose to use div as a frame, the structure of the frame is as follows:

code is as follows	copy code
<div id=" Choose-box-wrapper "   <div id=" Choose-box " & nbsp;   <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 code to achieve the center effect:

code is as follows

copy code

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 first jump out of the frame. 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.)

The code is as follows

Copy Code

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, the page jumps out of the frame. The frame contains a close button to turn off the bomb frame.

The code is as follows	Copy Code
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"); }

Full source Download Http://file.111cn.net/upload/2014/4/SchoolTest.zip