Create a dialog box (data, steps, and Code) for selecting a Chinese university)

Figure 1: Effect

1. Data

Contains a total of 3049 universities, copy from the human network (for learning and exchange only, do not for commercial projects), data address: http://files.cnblogs.com/technology/school.js. this is a script file containing JSON objects that stores school information in the following format:

 
VaR schoollist = [{"ID": 1, // The province ID "school": [{"ID": 1001, // The school ID "name ": "\ u6e05 \ u534e \ u5927 \ u5b66" // school name}/...], // This province's school "name": "\ u5317 \ u4eac"}, //...];
 

2. Step 2.1: Create a dialog box and pop-up mode

Currently, the bullet box is divided into IFRAME and Div. In this example, I select Div as the bullet box. The structure of the bullet box is 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>
 

The initial status of the pop-up box is "display: none". For the user experience, the pop-up box should be displayed in the center of the page after the user triggers the pop-up box.CodeThe center effect can be achieved:

Function compute ("display", "Block" has been installed ('{choose-box-wrapper'}.css ("position", "absolute" has been installed ('{choose-box-wrapper'{.css ("TOP", math. max (0, ($ (window ). height ()-$ ('# Choose-box-wrapper '). outerheight ()/2) + $ (window ). scrolltop () + "PX" character coloring ('character choose-box-wrapper'character .css ("Left", math. max (0, ($ (window ). width ()-$ ('# Choose-box-wrapper '). outerwidth ()/2) + $ (window ). scrollleft () + "PX ");}
 

2.2 load the province list and School List

The first province in the list is displayed by default. after loading all the lists of the provinces, You need to bind a click function to each item. After clicking, the user updates the list of universities in the selected provinces.

After updating the university list in the province, you also need to bind a click function to each item. After selecting the university, you can perform the corresponding operations. (For example, enter a value for a text box and redirect the page to etc .)

Function initprovince () {// The original province (). ('{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 event for adding a province list item $ ('. province-item '). BIND ('click', function () {var item = $ (this); var province = item. ATTR ('vince-id'); var choosenitem = item. parent (). find ('. choosen '); If (choosenitem) $ (choosenitem ). removeclass ('choosen'); item. addclass ('choosen '); // update the Emy list initschool (province) ;});} function initschool (provinceid) {// The original Emy-level empty lists ('{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 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 Hide ();});}

2.3 pop-up and hide windows

In this example, you click a text box that requires you to enter the school. The pop-up dialog box appears. The pop-up box contains the close button to close the dialog box.

 
// Pop-up window function POP () {// center the window to makecenter (); // initialize the province list initprovince (); // by default, add a choosen style $ ('[province-id = "1"]') to the first province. addclass ('choosen '); // initialize the university list initschool (1);} // hide the window function hide({{}('{choose-box-wrapper'}.css ("display", "NONE ");}
 

3. Demo and download University: Select School