仿51job的弹出框+地区选择代码

<
!DOCTYPE HTML PUBLIC "
-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"
>

<
HTML xmlns="
http://www.w3.org/1999/xhtml"
>
<
HEAD>
<
TITLE>
仿51job的弹出框+地区选择代码<
/TITLE>

<
META http-equiv=Content-Type content="
text/html
charset=gb2312"
>

<
STYLE type=text/css>
BODY
{
 
FONT-SIZE: 12px
PADDING-TOP: 50px
}
H2
{
 
PADDING-RIGHT: 0px
PADDING-LEFT: 0px
FONT-WEIGHT: bold
FONT-SIZE: 12px
PADDING-BOTTOM: 0px
MARGIN: 0px
PADDING-TOP: 0px
}
.bton
{
 
BORDER-RIGHT:
#ccc 1px solid
BORDER-TOP:
#ccc 1px solid
BACKGROUND:
#ddd
BORDER-LEFT:
#ccc 1px solid
BORDER-BOTTOM:
#ccc 1px solid
}
.cont
{
 
PADDING-RIGHT: 10px
PADDING-LEFT: 10px
PADDING-BOTTOM: 10px
PADDING-TOP: 10px
}

#main
{
 
MARGIN: 0px auto
WIDTH: 400px
}

#selectItem
{
 
BORDER-RIGHT:
#000 1px solid
BORDER-TOP:
#000 1px solid
MARGIN-TOP: 10px
Z-INDEX: 2
BACKGROUND:
#fff
OVERFLOW: hidden
BORDER-LEFT:
#000 1px solid
WIDTH: 400px
BORDER-BOTTOM:
#000 1px solid
POSITION: absolute
TOP: 0px
}

#preview
{
 
BORDER-RIGHT:
#ccc 1px solid
BORDER-TOP:
#ccc 1px solid
MARGIN: 1px
BORDER-LEFT:
#ccc 1px solid
BORDER-BOTTOM:
#ccc 1px solid
}

#result
{
 
BORDER-RIGHT:
#ccc 1px solid
BORDER-TOP:
#ccc 1px solid
MARGIN-TOP: 10px
BORDER-LEFT:
#ccc 1px solid
BORDER-BOTTOM:
#ccc 1px solid
}
.tit
{
 
PADDING-LEFT: 10px
MARGIN: 1px
LINE-HEIGHT: 20px
HEIGHT: 20px
}
.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
OVERFLOW: hidden
HEIGHT: 0px
}

#bg
{
 
DISPLAY: none
Z-INDEX: 1
BACKGROUND:
#ccc
FILTER: alpha(opacity=70)
LEFT: 0px
WIDTH: 100%
POSITION: absolute
TOP: 0px
opacity: 0.7
}
.hidden
{
 
DISPLAY: none
}
.move
{
 
CURSOR: move
}
<
/STYLE>

<
META content="
MSHTML 6.00.2900.3314"
name=GENERATOR>
<
/HEAD>

<
BODY>

<
DIV id=main>
<
INPUT class="
bton pointer"
onclick=openBg(1)
openSelect(1) type=button value=请选择 name=button>

<
DIV id=result>

<
DIV class="
tit bgc_eee"
>

<
H2>
您已选择的城市汇总<
/H2>
<
/DIV>

<
DIV class=cont id=makeSureItem>
<
/DIV>
<
/DIV>
<
/DIV>

<
DIV id=bg>
<
/DIV>

<
DIV class=hidden id=selectItem>

<
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 style="
MARGIN-BOTTOM: 10px"

onchange=showSelect(this.value) name="
"
>
<
OPTION value=0 selected>
第0层<
/OPTION>

 
<
OPTION value=1>
第1层<
/OPTION>
<
OPTION value=2>
第2层<
/OPTION>
<
OPTION
 
value=3>
第3层<
/OPTION>
<
/SELECT>

<
DIV id=c00>
<
INPUT onclick=addPreItem() type=checkbox value=北京 name=ck00>
北京
<
INPUT onclick=addPreItem() type=checkbox value=福建 name=ck00>
福建 <
INPUT
onclick=addPreItem() type=checkbox value=四川 name=ck00>
四川 <
INPUT
onclick=addPreItem() type=checkbox value=江苏 name=ck00>
江苏 <
/DIV>

<
DIV id=c01>
<
INPUT onclick=addPreItem() type=checkbox value=上海 name=ck01>
上海
<
INPUT onclick=addPreItem() type=checkbox value=云南 name=ck01>
云南 <
INPUT
onclick=addPreItem() type=checkbox value=贵州 name=ck01>
贵州 <
/DIV>

<
DIV id=c02>
<
INPUT onclick=addPreItem() type=checkbox value=黑龙江 name=ck01>
黑龙江
<
INPUT onclick=addPreItem() type=checkbox value=吉林 name=ck01>
吉林 <
INPUT
onclick=addPreItem() type=checkbox value=辽宁 name=ck01>
辽宁 <
/DIV>

<
DIV id=c03>
<
INPUT onclick=addPreItem() type=checkbox value=美国 name=ck01>
美国
<
INPUT onclick=addPreItem() type=checkbox value=阿富汗 name=ck01>
阿富汗 <
INPUT
onclick=addPreItem() type=checkbox value=日本 name=ck01>
日本 <
/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"
)

//alert(maxItem)

//var lenMax = 2

//alert(1)

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

 
//alert(document.body.offsetHeight)

 
//alert(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)
 
 

{
 
 
 
//len++

 
 
 
//if(len >
lenMax)
 
 
 
//
{
 
 
 
// 
alert("
不能超过"
+ lenMax +"
个选项！"
)
 
 
 
// 
return false

 
 
 
//}
 
 
 
var mes = "
<
input type='checkbox' checked='true' value='"
+ items[i].value +"
' >
"
+ items2[i].value
 
 
 

 
 
}
 
}
 
$(id2).innerHTML = "
"


 
$(id2).innerHTML += mes

 
//alert($(id2).innerHTML)

}
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

 
 
//$(oDrag).style.left = $(oDrag).offsetLeft + "
px"


 
 
//$(oDrag).style.top = $(oDrag).offsetTop + "
px"


 
 
dx = parseInt($(oDrag).style.left)

 
 
dy = parseInt($(oDrag).style.top)

 
 
//dx = $(oDrag).offsetLeft

 
 
//dy = $(oDrag).offsetTop

 
 
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>

<
center>

<
br>
<
br>
<
br>
<
br>
<
br>
<
br>
<
br>

<
br>
<
br>
<
br>
<
br>
<
br>
<
br>
<
br>

<
br>
<
br>
<
br>

<
/center>

<
/BODY>
<
/HTML>