js 模拟下拉框

最新推荐文章于 2021-04-02 11:34:55 发布

原创最新推荐文章于 2021-04-02 11:34:55 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#function #border #url #input #360 #div

js学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用纯 JavaScript 实现的自定义下拉选择框功能，该选择框能够显示专家名单，并在用户选择专家时展示其研究领域。通过鼠标悬停事件，实现了浮动提醒效果，提供更友好的用户体验。

实现如图的功能：

<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>

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

<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>