js 模拟下拉框

实现如图的功能:

<!--add-->
  <script type="text/javascript">
 //[CDATA[
  var $=function(obj){
   return document.getElementById(obj);
  }
  //浮动提醒
  function sWin(pObj,ev,objId,argstr){
   var eObj = ev;
   var leftpos = parseInt(eObj.offsetParent.offsetLeft) + 63;
//   var toppos = parseInt(eObj.offsetParent.offsetTop) + parseInt(eObj.offsetTop)-38;
   var toppos = parseInt(eObj.offsetParent.offsetTop) + parseInt(eObj.offsetTop)-parseInt(eObj.parentNode.scrollTop)-38;
   var showObj = $(objId);
   showObj.parentNode.style.position = "relative";
   showObj.style.visibility = "visible";
   showObj.style.left = leftpos;
   showObj.style.top = toppos;

   /***repair***/
   showObj.getElementsByTagName("span")[0].innerHTML = argstr;
   /***repair end***/

   showObj.onmouseout = function(){
    showObj.style.visibility = "hidden";
    pObj.style.display = "none";
   }
   showObj.onmouseover = function(){
    showObj.style.visibility = "visible";
    pObj.style.display = "block";

   }
  }
  //模拟selete触发事件
  function selectInit(objId,sObjId,listObj){
   var selectObj = $(objId);
   var liArr = new Array();
   var tempStr;
   liArr = selectObj.getElementsByTagName("li");
   for (var i = 0;i<liArr.length;i++ )
   { 
    liArr[i].onmouseover = function(event){
     var e = event || window.event;
     var eobj = e.srcElement || e.target;
     this.style.background = "#e3e3e3";
     this.style.cursor = "pointer";
     selectObj.style.display = "block";
     /******repair*******/
     tempStr = this.innerHTML;
     /******repair end******/
     
     sWin(selectObj,eobj,sObjId,tempStr);
    }
    liArr[i].onmouseout = function(){
     $(sObjId).style.visibility = "hidden";
     this.style.background = "#ffffff";
    }
    liArr[i].onclick = function(){
     $(listObj).value = tempStr;
     $(sObjId).style.visibility = "hidden";
     selectObj.style.display = "none";
    }
   }
   selectObj.onmouseout = function(){
    selectObj.style.display = "none";
   }
   selectObj.onmouseover = function(){
    selectObj.style.display = "block";
   }
  }
  
  //]]>
 </script>
<style type="text/css">
 *{margin:0;padding:0;}
 body{font-size:12px;}
 #expert{width:85px;height:21px;background:url(
http://www.hc360.com/images/cms/ask_04.gif) no-repeat;border:0;line-height:21px;}
 #sWin{position:absolute;width:152px;height:93px;background:url(
http://www.hc360.com/images/cms/ask_03.gif) no-repeat left top;overflow:hidden;font-size:14px;line-height:22px;visibility:hidden;color:#ff0000;font-weight:bold;}
  #sWin p{margin:10px 11px 5px 22px;}
  #sWin span{color:#544242;font-weight:normal;}
 #namelist {border:#000 solid 1px;width:85px;list-style-type:none;display:none;background:#fff;position:absolute;left:65px;top:21px;height:110px;overflow-y:auto;overflow-x:hidden;}
  #namelist li{line-height:18px;width:75px!important;_width:85px;padding-left:10px;}
  </style>
<!--add end -->

<BODY style="margin-top:50px;">

   <div id="expertDiv" name="expertDiv">技术专家:

   <!--add-->
    <input type="text" id="expert" name="expert" value="请选择专家" readonly />
    <ul id="namelist">
   <li>张山山</li>
   <li>李山</li>
   <li>问山一</li>
   <li>陈山二</li>
   <li>张三无</li>
   <li>66666666</li>
   <li>张三无</li>
   <li>66666666</li>
   <li>陈山二</li>
   <li>张三无</li>
   <li>66666666</li>
   <li>张三无</li>
   <li>66666666</li>
   <li>陈山二</li>
   <li>张三无</li>
   <li>66666666</li>
   <li>张三无</li>
   <li>66666666</li>
   <li>陈山二</li>
   <li>张三无</li>
   <li>66666666</li>
   <li>张三无</li>
   <li>66666666</li>
  </ul>
  <div id="sWin"><p>研究领域:<br /><span>安全防范报警系统、智能建筑</span></p></div>
  <script type="text/javascript">
   $("expert").onclick = function(){
    $("namelist").style.display = "block";
    if(parseInt($("namelist").scrollHeight)<110){
     $("namelist").style.height = parseInt($("namelist").scrollHeight) + "px";
    }else{
     $("namelist").style.height = "110px";
    }
    $("namelist").parentNode.style.position = "relative";
   }
   selectInit("namelist","sWin","expert");
  </script>
 <!--add end-->

   </div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值