在一个页面中，有一text的数据是通过点击其后，显示一个省份的层，选择省份后展示该省份下所有城市，每个城市前面都加checkbox，点确认把选中的城市自动显示在text里.


<style>
.fugai{
position:absolute;
z-index:100;
left:0px;
top:0px;
filter:alpha(opacity=10);/*IE兼容*/
opacity:0.1;/*FF兼容*/
-moz-opacity:0.1;
background-color:red;
}
.choose{
position:absolute;
z-index:101;
width:300px;
height:70px;
background-color:blue;
}
.move{
width:300px;
height:20px;
cursor:hand;
background-color:green;
border:solid black;
}
</style>
<body>
<input type="text" id="address">
<a href="javascript:void(null);" onclick="show();">选择地点</a>
<div id="fugai" class="fugai" style="display:none;">
</div>
<div id="ch" style="display:none;left:50px;top:20px;" class="choose">
<div class="move" onmousedown="move(this.parentNode,event);";>拖动我</div><br>
<input type="checkbox" name="city" value="北京">北京&nbsp;&nbsp;
<input type="checkbox" name="city" value="上海">上海&nbsp;&nbsp;
<input type="button" value="确定" onclick="choose();">
</div>
</body>
<script>
function show(){
document.getElementById("fugai").style.display="block";
document.getElementById("fugai").style.width=document.body.clientWidth;
document.getElementById("fugai").style.height=document.body.clientHeight;
document.getElementById("ch").style.display="";
document.getElementById("ch").style.left="50px";
document.getElementById("ch").style.top="20px";
}
function choose(){
document.getElementById("fugai").style.display="none";
document.getElementById("ch").style.display="none";
var citys=document.getElementsByName("city");
var strCity="";
var join="";
for(var i=0;i<citys.length;i++){
if(citys[i].checked){
strCity=strCity+join;
strCity=strCity+citys[i].value;
join=",";
}
}
document.getElementById("address").value=strCity;
}
function move(element,event){
var x=parseInt(element.style.left);
var y=parseInt(element.style.top);
var maxLeft=parseInt(document.body.clientWidth)-parseInt(element.clientWidth);
var maxTop=parseInt(document.body.clientHeight)-parseInt(element.clientHeight); var deltaX=event.clientX-x;
var deltaY=event.clientY-y;
//添加临时事件
if(document.addEventListener){//2级DOM
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}else if(document.attachEvent){//IE5+
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}else{//IE4
var oldonmousemove=document.onmousemove;
var oldonmouseup=document.onmouseup;
document.onmousemove=moveHandler;
document.onmouseup=upHandler;
}
//我们处理该事件,不让其他元素见到它
if(event.preventDefault){//2级DOM
event.preventDefault();
}else{//IE
event.returnValue=false;
} //鼠标移动事件
function moveHandler(e){
if(!e){//IE
e=window.event;
} element.style.left=(e.clientX-deltaX)+"px";
element.style.top=(e.clientY-deltaY)+"px";
var left=parseInt(element.style.left);
var top=parseInt(element.style.top);
if(left<0){
element.style.left="0px";
}
if(left>maxLeft){
element.style.left=maxLeft+"px";
}
if(top<0){
element.style.top="0px";
}
if(top>maxTop){
element.style.top=maxTop+"px";
}
if(e.stopPropagation){//2级DOM
e.stopPropagation();
}else{//IE
e.cancelBubble=true;
}
}
//鼠标按键弹起
function upHandler(e){
if(!e){
e=window.event;
}
if(document.removeEventListener){//2级DOM
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}else if(document.detachEvent){//IE5+
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}else{//IE4
document.onmouseup=oldonmouseup;
document.onmousemove=oldonmousemove;
}
if(e.stopPropagation){//2级DOM
e.stopPropagation();
}else{//IE
e.cancelBubble=true;
}
}
}
</script>