分享一个类似51job方式的地址选择效果:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
< 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 >