charleshuang

js点击出现div选定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>提示</TITLE>
<META http-equiv=content-type content="text/html; charset=gbk">
<STYLE type=text/css>
BODY {
    BACKGROUND: #fff; FONT: 76%/1.5 Arial,sans-serif; COLOR: #333
}
input{
  width:200px;border: 1px solid #86B9D6;
}
#reg_div{
  color: #154BA0;
  border: 1px solid #86B9D6;
  background: #D9EEF9;
  position: absolute;
  z-index: 30;
  height: 180px;
  width:400px;
}
.city{
  width:80px;
  float:left;
  padding:8px;
  text-align:center;

}
.ps_div{
  padding:10px 10px 2px 10px;
  border-bottom:1px dotted #ccc;
}
</STYLE>
<script>
function oo(obj){
        return typeof(obj)=="string"?document.getElementById(obj):obj
}

function allt(id){

    e=oo(id)
    var et=e.offsetTop;
    var el=e.offsetLeft;
    while(e=e.offsetParent){
        et+=e.offsetTop;
        el+=e.offsetLeft;
    }

                oo("reg_div").style.left=(el) + "px";
                oo("reg_div").style.top=(et+20) + "px";
                oo("reg_div").style.display=\'\';
//                oo("reg_div2").innerHTML=id;    //    添加提示信息(根据id判断)

           //     oo("reg_div").style.display=\'none\';

}
function bllt(id){

  oo("input_01").value=oo(id).innerHTML
  oo("reg_div").style.display=\'none\';
}
</script>
</HEAD>
<body>
<script>
function Object_Onclick(){

if(document.activeElement.id!="input_01"){
//    alert("dd")
  oo(reg_div).style.display=\'none\';
}
}
window.document.onclick= Object_Onclick;

</script>
<input id=input_01 type="text" onfocus="allt(this);">
<div id=reg_div style="display:none">
    <div class=ps_div><span style="float:right;" onclick="oo(\'reg_div\').style.display=\'none\'">关闭</span>查找提示:</div>
<div id=city_01 class=city onclick="bllt(this)">北京</div>
<div id=city_02 class=city onclick="bllt(this)">上海</div>
<div id=city_03 class=city onclick="bllt(this)">广州</div>
<div id=city_04 class=city onclick="bllt(this)">深圳</div>
<div id=city_01 class=city onclick="bllt(this)">杭州</div>
<div id=city_02 class=city onclick="bllt(this)">南京</div>
<div id=city_03 class=city onclick="bllt(this)">成都</div>
<div id=city_04 class=city onclick="bllt(this)">武汉</div>
<div id=city_01 class=city onclick="bllt(this)">青岛</div>
<div id=city_02 class=city onclick="bllt(this)">大连</div>
<div id=city_03 class=city onclick="bllt(this)">重庆</div>
<div id=city_04 class=city onclick="bllt(this)">三亚</div>
<div id=city_01 class=city onclick="bllt(this)">郑州</div>
<div id=city_02 class=city onclick="bllt(this)">宁波</div>
<div id=city_03 class=city onclick="bllt(this)">西安</div>
<div id=city_04 class=city onclick="bllt(this)">长沙</div>

</div>
</body>

</HTML>

本文来自: 脚本之家(http://www.jb51.net/) 详细出处参考:http://www.jb51.net/article/9897.htm

分类:

技术点:

相关文章: