通过DIV模拟实现下拉选择框

   Windows自带的下拉选择框的优先级别比大多数控件（media player也有类似的“毛病”）要高。因此，在具有绝对定位的层的网页里，一旦触发下拉框空间的onChange事件，将会引起整个页面的闪烁，这样将造成用户体验明显下降。于是，我参考了网上一篇未署名的帖子，模拟出了一个具有筛选功能的下拉选择控件。在我们Web Builder的控件库里，我们改进了该控件，使它具有了自学习的功能（能够将下拉选项中没有的，用户输入的值，自动学习并且存入到数据库）。
    一下使我们改进后的下拉选择控件的代码：
1: 建立控件的内容由txt_SearchLimit、txt_SearchLimit_input、txt_SearchLimit_button、txt_SearchLimit_layer、txt_SearchLimit_table组成。

function BuildControl()
{
var tStrToolBar ="";//控件的内容
tStrToolBar  +=   " <div id=\ " txt_SearchLimit\ "  ctrlId=\ " txt_SearchLimit\ "  selectedIndex=\ " 4 \ "  value=\ " 0 \ "  dspValue=\ " 选择时间范围\ "  style=\ " \ "  class=\ " \ " > " ;
    tStrToolBar  +=   "  <span> " ;
    tStrToolBar  +=   " <input id=\ " txt_SearchLimit_input\ "   value=\ " \ "  type=\ " text\ "  class=\ " \ "  style=\ " width:80px;border - right:none none none;\ "  onkeydown=\ " displayLayer( this .parentElement.parentElement);\ " onKeyup=\"lookUpInput(this.parentElement.parentElement);\"    > " ;
    tStrToolBar  +=   " <input type=\ " button\ "  id=\ " txt_SearchLimit_button\ "  value=\ "  \ "  class=\ " SelectButton\ "  style=\ " width:18px;height:18px;\ "   onClick=\ " showLayer( this .parentElement.parentElement)\ " /> " ;
    tStrToolBar  +=   " </span> " ;
    tStrToolBar  +=   " <div id=\ " txt_SearchLimit_layer\ "  bgcolor=\ " #FFFFFF\ "   class=\ " SelectTreeList\ "  style=\ " width:80px;height:100px;\ " > " ;
    tStrToolBar  +=   "    <table id=\ " txt_SearchLimit_table\ "  width=\ " 80px\ "  cellspacing=\ " 0 \ "  cellpadding=\ " 0 \ "  border=\ " 0 \ "  bgcolor=\ " #FFFFFF\ " > " ;
    tStrToolBar  +=   "       <tr onmouseover=\ " moveWithOptions('highlight','white')\ "  onmouseout=\ " moveWithOptions('','')\ "  onmouseup=\ " selectedText( this .parentElement.parentElement.parentElement.parentElement)\ " > " ;
    tStrToolBar  +=   "         <td style=\ " display:none\ " >1</td> " ;
    tStrToolBar  +=   "         <td >今天</td> " ;
    tStrToolBar  +=   "       </tr> " ;
    tStrToolBar  +=   "       <tr onmouseover=\ " moveWithOptions('highlight','white')\ "  onmouseout=\ " moveWithOptions('','')\ "  onmouseup=\ " selectedText( this .parentElement.parentElement.parentElement.parentElement)\ " > " ;
    tStrToolBar  +=   "         <td style=\ " display:none\ " >3</td> " ;
    tStrToolBar  +=   "         <td >最近三天</td> " ;
    tStrToolBar  +=   "       </tr> " ;
    tStrToolBar  +=   "       <tr onmouseover=\ " moveWithOptions('highlight','white')\ "  onmouseout=\ " moveWithOptions('','')\ "  onmouseup=\ " selectedText( this .parentElement.parentElement.parentElement.parentElement)\ " > " ;
    tStrToolBar  +=   "         <td style=\ " display:none\ " >7</td> " ;
    tStrToolBar  +=   "         <td >最近一星期</td> " ;
    tStrToolBar  +=   "       </tr> " ;
    tStrToolBar  +=   "        <tr onmouseover=\ " moveWithOptions('highlight','white')\ "  onmouseout=\ " moveWithOptions('','')\ "  onmouseup=\ " selectedText( this .parentElement.parentElement.parentElement.parentElement)\ " > " ;
    tStrToolBar  +=   "         <td style=\ " display:none\ " >30</td> " ;
    tStrToolBar  +=   "         <td >最近30天</td> " ;
    tStrToolBar  +=   "       </tr> " ;
    tStrToolBar  +=   "       <tr onmouseover=\ " moveWithOptions('highlight','white')\ "  onmouseout=\ " moveWithOptions('','')\ "  onmouseup=\ " selectedText( this .parentElement.parentElement.parentElement.parentElement)\ " > " ;
    tStrToolBar  +=   "         <td style=\ " display:none\ " >0</td> " ;
    tStrToolBar  +=   "         <td >选择时间范围</td> " ;
    tStrToolBar  +=   "       </tr></table> " ;
    tStrToolBar  +=   "  </div> " ;
   document.body.innerHTML = tStrToolBar;
}

 2、加入控制控件的脚本

// 用在自学习控件文本框的KeyPress事件中
   function  displayLayer(objAutoLearn)
   {
      if  (event.keyCode  ==   9 )
        return ;
      var  objLayer  =  objAutoLearn.lastChild;
      if (objLayer  != null )
     {
        if (objLayer.style.display != " block " )
       {
         objLayer.style.display  = " block " ;
           with (objLayer.style)
          {
            var  objLearn  =  objAutoLearn.firstChild.firstChild;
            var  xy  =  getSelectPosition(objLearn);
           posLeft  =  xy[ 0 ];
          
           pixelTop  =  xy[ 1 ] + objLearn .offsetHeight;
         }
          if (objLayer.innerHTML  ==   "" )
         {
            //原本是通过Web Services从服务器端，获取数据的函数。这里用不上
               //ShowAutoLearnData(objAutoLearn);
         }
       }
     }
   }
   // 用在自学习控件的按钮按下的的事件中
function  showLayer(objAutoLearn)
   {
      var  objLayer  =  objAutoLearn.lastChild;
      if (objLayer  != null )
     {
        if (objLayer.style.display  != " block " )
       {
         objLayer.style.display  = " block " ;
           with (objLayer.style)
         {
            var  objLearn  =  objAutoLearn.firstChild.firstChild;
            var  xy  =  getSelectPosition(objLearn);      
           posLeft  =  xy[ 0 ];
          
           pixelTop  =  xy[ 1 ] + objLearn .offsetHeight;
        }
          if (objLayer.innerHTML  ==   "" )
         {
             ShowAutoLearnData(objAutoLearn);
         }
       }
        else
       {
         objLayer.style.display  = " none " ;
       }
     }
   }

3、获取下拉选项显示位置的函数

  function  getSelectPosition(elt) 
   {
     var  pos  =   new  Object;
    pos.x  =   0 ;
    pos.y  =   0 ;
     // 一直找到body，如果相等就不加
     while  (elt &&  elt.tagName.toUpperCase() != " BODY " )
    {    
         if  (pos.y != elt.offsetTop  &&  elt.style.position  != " absolute " )    
        {  
            pos.x  +=  elt.offsetLeft;
            pos.y  +=  elt.offsetTop;
             if (elt.tagName.toUpperCase() != " HTML " )
            {
             pos.x  =  pos.x  - elt.scrollLeft;
             pos.y  =  pos.y  - elt.scrollTop;
            }
        }    
        elt  =  elt.offsetParent;
    }
     return  ([pos.x,pos.y]);
  }

4、查找用户输入项

  function  lookUpInput(objAutoLearn)
   {
      if (objAutoLearn.firstChild.firstChild.readOnly  ==   true )
     {
        return ;
     }
      var  strInputValue  =  objAutoLearn.firstChild.firstChild.value;
    
         var  objTable  =  objAutoLearn.lastChild.firstChild;
          if  (objTable !=   null   &&  objTable.rows.length > 0 )
         {
             var  rowCount  =  objTable.rows.length;
             for ( var  i = 0 ; i < rowCount;i ++ )
            {
                var  objRow  =  objTable.rows[i];
                var  strValue  =  objRow.cells[ 0 ].innerText;
                var  strDspValue  =  objRow.cells[ 1 ].innerText;
                if  (strDspValue.indexOf(strInputValue) !=- 1 )
               {
                 objRow.style.display  = " block " ;
               }
                else
               {
                  objRow.style.display  = " none " ;
               }
            }
         }
      
   }

5、将选择的值放置到文本框并且给控件的value,Dspvalue属性赋值

function  selectedText(objAutoLearn) 
   {
      var  objInput  =  objAutoLearn.firstChild.firstChild;
      if  (objInput  != null )
     {
         with (event.srcElement) 
         {
           objInput.value =  innerText;
           objAutoLearn.setAttribute( " value " ,previousSibling.innerText);
           objAutoLearn.setAttribute( " dspValue " ,innerText);
           objAutoLearn.setAttribute( " selectedIndex " ,parentElement.rowIndex);
         }
       objAutoLearn.lastChild.style.display  = " none " ;  
     }
     objInput.fireEvent( " onChange " ); // 引发控件的onChange事件
   }