地址多项选择方式效果HTML

分享一个类似51job方式的地址选择效果：

 

代码

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 类似51job效果的地址选择 </ title >
< style  type ="text/css" >
<!--
body { padding-top : 50px ; font-size : 12px ; }
h2 { margin : 0px ; padding : 0px ; font-size : 12px ; font-weight : bold ; }
.bton { border : 1px solid #CCC ; background : #DDD ; }
.cont { padding : 10px ; }
#main { width : 400px ; margin : 0px auto ; }
#selectItem { background : #FFF ; position : absolute ; top : 0px ; left : center ; border : 1px solid #000 ; overflow : hidden ; margin-top : 10px ; width : 400px ; z-index : 2 ; }
#preview { margin : 1px ; border : 1px solid #CCC ; }
#result { border : 1px solid #CCC ; margin-top : 10px ; }
.tit { line-height : 20px ; height : 20px ; margin : 1px ; padding-left : 10px ; }
.bgc_ccc { background : #CCC ; }
.bgc_eee { background : #eee ; }
.c_999 { color : #999 }
.pointer { cursor : pointer ; }
.left { float : left ; }
.right { float : right ; }
.cls { clear : both ; font-size : 0px ; height : 0px ; overflow : hidden ; }
#bg { background : #CCC ; filter : alpha(opacity=70) ; opacity : 0.7 ; width : 100% ; ;position : absolute ; left : 0px ; top : 0px ; display : none ; z-index : 1 ; }
.hidden { display : none ; }
.move { cursor : move ; }
-->
</ style >
</ head >
< body >
< div  id ="main" >
   < input  name ="button"  type ="button"  class ="bton pointer"  value ="请选择"  onclick ="openBg(1);openSelect(1)" />
   < div  id ="result" >
         < div  class ="tit bgc_eee" >

             < h2 > 您已选择的城市汇总 </ h2 >
         </ div >     
         < div  class ="cont"  id ="makeSureItem" >
         </ div >
   </ div >
</ div >
    
< div  id ="bg" >
</ div >
< div  id ="selectItem"  class ="hidden" >
         < div  class ="tit bgc_ccc move"  onmousedown ="drag(event,this)" >

< h2  class ="left" > 请选择城市 </ h2 >
     < span  class ="pointer right"  onclick ="openBg(0);openSelect(0);" > [取消] </ span >
     < span  class ="pointer right"  onclick ="makeSure();" > [确定] </ span >             
         </ div >
     < div  class ="cls" ></ div >
     < div  class ="cont" >
     < div  id ="selectSub" >
     < select  name =""  onchange ="showSelect(this.value)"  style ="margin-bottom:10px;" >
         < option  value ="0" > 第0层 </ option >
         < option  value ="1" > 第1层 </ option >
         < option  value ="2" > 第2层 </ option >
         < option  value ="3" > 第3层 </ option >
         </ select >
     < div  id ="c00" >
     < input  type ="checkbox"  name ="ck00"  onclick ="addPreItem()"  value ="北京" /> 北京
     < input  type ="checkbox"  name ="ck00"  onclick ="addPreItem()"  value ="福建" /> 福建
     < input  type ="checkbox"  name ="ck00"  onclick ="addPreItem()"  value ="四川" /> 四川     < input  type ="checkbox"  name ="ck00"  onclick ="addPreItem()"  value ="江苏" /> 江苏
                 </ div >

     < div  id ="c01" >
     < input  type ="checkbox"  name ="ck01"  onclick ="addPreItem()"  value ="上海" /> 上海
     < input  type ="checkbox"  name ="ck01"  onclick ="addPreItem()"  value ="云南" /> 云南
     < input  type ="checkbox"  name ="ck01"  onclick ="addPreItem()"  value ="贵州" /> 贵州
                 </ div >
     < div  id ="c02" >
     < input  type ="checkbox"  name ="ck01"  onclick ="addPreItem()"  value ="黑龙江" /> 黑龙江
          < input  type ="checkbox"  name ="ck01"  onclick ="addPreItem()"  value ="吉林" /> 吉林
     < input  type ="checkbox"  name ="ck01"  onclick ="addPreItem()"  value ="辽宁" /> 辽宁
                 </ div >
     < div  id ="c03" >
     < input  type ="checkbox"  name ="ck01"  onclick ="addPreItem()"  value ="美国" /> 美国
     < input  type ="checkbox"  name ="ck01"  onclick ="addPreItem()"  value ="阿富汗" /> 阿富汗
     < input  type ="checkbox"  name ="ck01"  onclick ="addPreItem()"  value ="日本" /> 日本
                 </ div >

             </ div >
         </ div >
     < div  id ="preview" >
             < div  class ="tit bgc_eee c_999" >
                 < h2 > 您已选择的城市 </ h2 >
             </ div >     
     < div  class ="cont"  id ="previewItem" >
             </ div >
         </ div >

</ div >
    
< script  type ="text/javascript" >
/*  ------使用说明-----  */
/*
    添加城市方法：
添加组：找到id 是 "selectSub"中select标签下，添加option标签 value属性递增，找到 id 是 "selectSub",按照原有格式添加div,其id属性递增
    添加二级傅选矿选项
复制 id 是 "selectSub" 下任意input标签，粘贴在需要添加的位置。
*/
var  grow  =  $( " selectSub " ).getElementsByTagName( " option " ).length;  // 组数
var  showGrow  =   0 ; // 已打开组
var  selectCount  =   0 ;  // 已选数量 
showSelect(showGrow);
var  items  =  $( " selectSub " ).getElementsByTagName( " input " );

function  $(o){  // 获取对象
     if ( typeof (o)  ==   " string " )
     return  document.getElementById(o);
     return  o;
}
function  openBg(state){  // 遮照打开关闭控制
     if (state  ==   1 )
    {
        $( " bg " ).style.display  =   " block " ;
         var  h  =  document.body.offsetHeight  >  document.documentElement.offsetHeight  ?  document.body.offsetHeight : document.documentElement.offsetHeight;
        $( " bg " ).style.height  =  h  +   " px " ;
    }
     else
    {
        $( " bg " ).style.display  =   " none " ;
    }    
}
function  openSelect(state){  // 选择城市层关闭打开控制
     if (state  ==   1 )    
    {
        $( " selectItem " ).style.display  =   " block " ;
        $( " selectItem " ).style.left  =  ($( " bg " ).offsetWidth  -  $( " selectItem " ).offsetWidth) / 2 + "px";
        $( " selectItem " ).style.top  =  document.body.scrollTop  +   100   +   " px " ;        
    }
     else
    {
        $( " selectItem " ).style.display  =   " none " ;
    }
}
function  showSelect(id){
     for ( var  i  =   0  ; i  <  grow ;i ++ )
    {
        $( " c0 "   +  i).style.display  =   " none " ;
    }
    $( " c0 "   +  id).style.display  =   " block " ;
    showGrow  =  id;
}
function  open(id,state){  // 显示隐藏控制
     if (state  ==   1 )
    $(id).style.display  =   " block " ;
    $(id).style.diaplay  =   " none " ;
}
function  addPreItem(){    
    $( " previewItem " ).innerHTML  =   "" ;
     var  len　 =   0  ;
     for ( var  i  =   0  ; i  <  items.length ; i ++ )
    {
         if (items[i].checked  ==   true )
        {
var  mes  =   " <input type='checkbox' checked='true' value=' " +  items[i].value  + " ' οnclick='copyItem(\ " previewItem\ " ,\ " previewItem\ " );same(this);'> "   +  items[i].value;
            $( " previewItem " ).innerHTML  +=  mes;
        }
    }
}
function  makeSure(){
     // alert(1);
     // $("makeSureItem").innerHTML = $("previewItem").innerHTML;
    openBg( 0 );
    openSelect( 0 );
    copyItem( " previewItem " , " makeSureItem " )    
}
function  copyHTML(id1,id2){
    $(id2).innerHTML  =  $( " id1 " ).innerHTML;
}
function  copyItem(id1,id2){
    
     var  mes  =   "" ;
     var  items2  =  $(id1).getElementsByTagName( " input " );
     for ( var  i  =   0  ; i  <  items2.length ; i ++ )
    {
         if (items2[i].checked  ==   true )
        {
            mes  +=   " <input type='checkbox' checked='true' value=' " +  items2[i].value  + " ' οnclick='copyItem(\ ""  + id2+  " \ " ,\ "" + id1 + " \ " );same(this);'> "   +  items2[i].value;            
        }
    }
    $(id2).innerHTML  =   "" ;
    $(id2).innerHTML  +=  mes;
}
function  same(ck){
     for ( var  i  =   0  ; i  <  items.length ; i ++ )
    {
         if (ck.value  ==  items[i].value)
        {
            items[i].checked  =  ck.checked;
        }
    }
}    
/*  鼠标拖动  */
var  oDrag  =   "" ;
var  ox,oy,nx,ny,dy,dx;
function  drag(e,o){
     var  e  =  e  ?  e : event;
     var  mouseD  =  document.all  ?   1  :  0 ;
     if (e.button  ==  mouseD)
    {
        oDrag  =  o.parentNode;
         // alert(oDrag.id);
        ox  =  e.clientX;
        oy  =  e.clientY;        
    }
}
function  dragPro(e){
     if (oDrag  !=   "" )
    {    
         var  e  =  e  ?  e : event;
        dx  =  parseInt($(oDrag).style.left);
        dy  =  parseInt($(oDrag).style.top);
        nx  =  e.clientX;
        ny  =  e.clientY;
        $(oDrag).style.left  =  (dx  +  ( nx  -  ox ))  +   " px " ;
        $(oDrag).style.top  =  (dy  +  ( ny  -  oy ))  +   " px " ;
        ox  =  nx;
        oy  =  ny;
    }
}
document.onmouseup  =   function (){oDrag  =   "" ;}
document.onmousemove  =   function (event){dragPro(event);}
</ script >
</ body >
</ html >

 

 

转载于:https://www.cnblogs.com/haitunzhilian/archive/2009/12/15/1624573.html