基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)基于jquery选了一个中国大学的弹匣，有需要的朋友可以参考一下。1.数据共包含中国3049所大学，复制自Renren.com(仅供学习交流，请勿用于商业项目)。这是一个脚本文件，其中包含的JSON对象存储了大学的信息。格式为：复制代码code如下：var schoolList=[ {id:1，//省id 学校:[{id: 1001，//学校id 名称: u6e 05 U534E u 5927 u5b 66 //学校名称}/.]，//本省学校名称: 2。Step 2.1项目符号框架的结构和弹出方式目前项目符号框架分为iframe和div两种形式。在这个例子中，我选择使用div作为项目符号框架。框的结构如下：复制代码如下：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 id= choose-a-School /Div Div id= choose-box-bottom input type= bottom onclick= hide() value= close /Div/Div/Div子弹框在初始状态下是隐藏的(显示：none)。为了用户体验，在用户触发打开子弹框的时间后，子弹框应该显示在页面中央。使用下面的代码可以实现中心效果：复制代码如下：function make center(){ $( # choose-box-wrapper )。CSS (display ， block) $(#choose-box-wrapper )。css(位置，绝对)；$(#choose-box-wrapper )。css(top ，Math.max(0，($(window))。height()-$( # choose-box-wrapper )。outerHeight())/2) $(窗口)。scroll top()) px )；$(#choose-box-wrapper )。css(left ，Math.max(0，($(window))。width() - $(#choose-box-wrapper )。outerWidth())/2) $(窗口)。scroll left()) px )；} 2.2加载省份和学校列表第一次弹出框时默认为列表中的第一个省份。这个省的列表全部加载后，每一项都需要绑定一个点击函数，用户点击后，就会更新用户选择的省内高校列表。更新本省高校列表后，每一项还会绑定一个点击功能。用户选择大学后可以进行相应的操作。(例如，填写文本框、重定向页面等。)复制代码如下：函数initProvince() {//清空原省份列表$(#choose-a-province )。html(“”)；for(I=0；ischoolList.lengthi ) { $(#choose-a-province )。append( a class= province-item province-id= school list[I].id schoolList[i]。名称/a )；}//添加点击事件$(。省-项目)。bind (click ，function(){ var item=$(this)；var省=item.attr(省-id )；var choosenItem=item.parent()。查找(。choosen’)；if(choosenItem) $(choosenItem)。remove class( chosen )；item . addclass( choosen )；//更新initSchool(省)的大学列表；} );}函数init school(provideid){//清空原来的学校列表$(#choose-a-school )。html(“”)；var schools=school list[province id-1]。学校；for(I=0；ischools.lengthi ) { $(#choose-a-school )。append( a class= school-item school-id= schools[I].id 学校[i]。名称/a )；}//添加点击事件$(。学校项目)。bind (click ，function(){ var item=$(this)；var school=item . attr( school-id )；//更新值$ (# school-name )。选择大学文本框中的val(item . text())；//关闭弹出窗口hide()；} );} 2.3弹出和隐藏窗口本例中，用户点击一个需要学校输入的文本框，页面从弹出框中弹出。弹出框包含关闭按钮，可以关闭弹出框。复制代码如下：//弹出窗口函数pop(){ //居中窗口make Center()；//初始化省份列表init province()；//默认情况下，添加选择的样式$ ([province-id= 1])。将class( chosen )添加到第一个省；//初始化initSchool(1)中的大学列表；}//隐藏窗口function Hide(){ $( # choose-box-wrapper )。CSS(显示，无)；} 3.演示下载http://demo.jb51.net/js/2012/jquery_school/下载：jquery_school.rar