怎么用javascript制作一個(gè)選擇大學(xué)的彈框

這篇文章主要介紹“怎么用javascript制作一個(gè)選擇大學(xué)的彈框”，在日常操作中，相信很多人在怎么用javascript制作一個(gè)選擇大學(xué)的彈框問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用javascript制作一個(gè)選擇大學(xué)的彈框”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

1. 數(shù)據(jù)

一共包含了全國(guó)3049所大學(xué), 從人人網(wǎng)拷貝的 (僅供學(xué)習(xí)交流, 請(qǐng)勿用于商業(yè)項(xiàng)目)。

數(shù)據(jù)地址:http://files.cnblogs.com/technology/school.js. 這是一個(gè)腳本文件, 里含的JSON對(duì)象存儲(chǔ)了學(xué)校的信息, 格式為:

var schoolList=[       {           "id":1, //省份id           "school": [               {                   "id": 1001, //學(xué)校id                   "name": "\u6e05\u534e\u5927\u5b66" //學(xué)校名稱               }               /....               ], //這個(gè)省的學(xué)校           "name": "\u5317\u4eac"     },       //...   ];

2. 步驟

2.1 彈框的構(gòu)造及彈出方式

目前彈框分為iframe和div兩種形式, 在本例中我選擇使用div作為彈框, 彈框的結(jié)構(gòu)如下:

<div id="choose-box-wrapper">     <div id="choose-box">       <div id="choose-box-title">           <span>選擇學(xué)校</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="關(guān)閉" />       </div>     </div>   </div>

彈框初始狀態(tài)下為隱藏狀態(tài)(display:none), 為了用戶體驗(yàn), 在用戶觸發(fā)打開彈框時(shí)間后, 彈框應(yīng)該在頁(yè)面中呈居中顯示, 使用下面一段代碼可以實(shí)現(xiàn)居中效果:

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 加載省份列表和學(xué)校列表

在***次跳出彈框時(shí), 默認(rèn)為列表中的***個(gè)省份. 加載完這個(gè)省份所有的名單后, 給每一項(xiàng)都需要綁定一個(gè)click函數(shù), 用戶在發(fā)生單擊后, 更新用戶選擇省份下的大學(xué)列表.

更新完該省的大學(xué)列表后, 同樣要給每一項(xiàng)都綁定一個(gè)click函數(shù), 用戶在選擇該大學(xué)后可以執(zhí)行相應(yīng)的操作. (比如給某個(gè)文本框填值, 頁(yè)面重定向etc.)

function initProvince()   {       //原先的省份列表清空       $('#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>');       }       //添加省份列表項(xiàng)的click事件       $('.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');               //更新大學(xué)列表               initSchool(province);           }       );   }       function initSchool(provinceID)   {       //原先的學(xué)校列表清空       $('#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>');       }       //添加大學(xué)列表項(xiàng)的click事件       $('.school-item').bind('click', function(){               var item=$(this);               var school = item.attr('school-id');               //更新選擇大學(xué)文本框中的值               $('#school-name').val(item.text());               //關(guān)閉彈窗               hide();           }       );   }

2.3 彈出及隱藏窗口

在本例中, 用戶點(diǎn)擊一個(gè)要求輸入學(xué)校的文本框, 頁(yè)面跳出彈框. 彈框中含有關(guān)閉按鈕, 可以關(guān)閉彈框.

//彈出窗口   function pop(){       //將窗口居中       makeCenter();           //初始化省份列表       initProvince();           //默認(rèn)情況下, 給***個(gè)省份添加choosen樣式       $('[province-id="1"]').addClass('choosen');           //初始化大學(xué)列表       initSchool(1);   }   //隱藏窗口   function hide()   {       $('#choose-box-wrapper').css("display","none");   }

到此，關(guān)于“怎么用javascript制作一個(gè)選擇大學(xué)的彈框”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！