日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

  
 
 
 

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

  
 
 
 

   
  
  
  
   
   
  
  
  
     
   
  
  
  
       
   
  
  
  
        選擇學(xué)校   
   
  
  
  
    

彈框初始狀態(tài)下為隱藏狀態(tài)(display:none), 為了用戶體驗, 在用戶觸發(fā)打開彈框時間后, 彈框應(yīng)該在頁面中呈居中顯示, 使用下面一段代碼可以實現(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é)校列表

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

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

  
 
 
 

   
  
  
  
function initProvince()   
   
  
  
  
{   
   
  
  
  
    //原先的省份列表清空   
   
  
  
  
    $('#choose-a-province').html('');   
   
  
  
  
    for(i=0;i   
  
  
  
    {   
   
  
  
  
        $('#choose-a-province').append(''+schoolList[i].name+'');   
   
  
  
  
    }   
   
  
  
  
    //添加省份列表項的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   
  
  
  
    {   
   
  
  
  
        $('#choose-a-school').append(''+schools[i].name+'');   
   
  
  
  
    }   
   
  
  
  
    //添加大學(xué)列表項的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 彈出及隱藏窗口

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

   
 
 
 

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

3. 下載

原文鏈接：http://www.cnblogs.com/technology/archive/2012/07/25/2607560.html

責(zé)任編輯：張偉
來源： Create Chen的博客 JavaScript