利用闲暇时间做得一个selector孔件，请大家指教

Question

===========   NetSelection.htc 如下：<PUBLIC:COMPONENT>
<!--[NetSelection] //
//  Copyright 2002-9-25 Update.  All Rights Reserved.  Xiaobang [email protected]
//---------><!-- 缺省属性，可以被修改的 -->
<PROPERTY NAME="XmlDataSrc" VALUE=""/>
<PROPERTY NAME="DataField" VALUE=""/>
<PROPERTY NAME="Value" VALUE=""/>
<PROPERTY NAME="Height" VALUE="150"/>
<PROPERTY NAME="Width" VALUE="100"/>
<PROPERTY NAME="BorderColor" VALUE="GRAY"/>
<PROPERTY NAME="BorderWidth" VALUE="1"/>
<PROPERTY NAME="BackColor" VALUE="#FFFFFF"/>
<PROPERTY NAME="OptionFilterStyle" VALUE="1"/>
<PROPERTY NAME="OptionTextAlign" VALUE="LEFT"/>
<PROPERTY NAME="OptionBackColor" VALUE="#FFFFFF"/>
<PROPERTY NAME="OptionBackColorSel" VALUE="#FD9F02"/>
<PROPERTY NAME="OptionForeColor" VALUE="#000000"/>
<PROPERTY NAME="OptionForeColorSel" VALUE="#FFFFFF"/>
<PROPERTY NAME="OptionFontFalimy" VALUE="verdana,arial,helvetica"/>
<PROPERTY NAME="OptionFontSize" VALUE="12"/>
<PROPERTY NAME="OptionCursor" VALUE="HAND"/>
<PROPERTY NAME="OptionHeight" VALUE="19"/>
<!-- End --><!-- 定义内部事件 -->
<ATTACH EVENT="ondocumentready" FOR="element" ONEVENT="Initialize()"/>
<!-- End --><!-- 以下属性可读写 -->
<PROPERTY NAME="SelectIndex" GET="getSelectIndex"/>
<!-- End -->

Answer 1

/*************************************************************************************/
                      -----------  脚本部分  ---------------
/*************************************************************************************/<Script language="JavaScript">var m_XmlDataSrc;
var m_XmlSelectionDso;
var m_Selection=null;
var m_SelInput=null;var m_SelectIndex=0;/*== 属性的设置与读取
*/function getSelectIndex(){
  return m_SelectIndex;
}/===*  方法和事件
===========*/
//初始化------------------------------------------------------
function Initialize(){
  if (this.readyState != 'complete'){ return ; }
  m_SelInput=document.createElement('INPUT');
  element.appendChild(m_SelInput);
  with(m_SelInput.style){
    border=element.BorderWidth +' solid '+ element.BorderColor;
    height=element.OptionHeight;
    width=element.Width;
    paddingLeft=3;
    paddingRight=3;
    background=element.BackColor;
    fontFamily=element.OptionFontFalimy;
    fontSize=element.OptionFontSize;
    textAlign=element.OptionTextAlign;
    cursor=element.OptionCursor;
  }
  m_SelInput.onkeydown=e_SelectionKeyDown;  
  //m_SelInput.readOnly=true;
  m_SelInput.value=element.Value;
  if(m_SelInput.readOnly!=true){ m_SelInput.onclick=Show; }
}function Show(e){
  e_SelectionMouseLeave();
  CreateXmlSelectionDso(element.XmlDataSrc);
  if(!m_XmlSelectionDso){ return ; }
  
  var subMenuItems = m_XmlSelectionDso.selectNodes("//Item[@name='"+ element.DataField +"']/SubMenu");
  var xmlElement = subMenuItems.nextNode();
  if(xmlElement == null){ return ;}  var m_SelDiv=document.createElement("DIV");
  element.appendChild(m_SelDiv);
  //this.insertAdjacentElement("AfterEnd",m_SelDiv);
  m_Selection=m_SelDiv;
  var m_SelTable=document.createElement("TABLE");
  m_SelDiv.appendChild(m_SelTable);
  var m_SelTb=document.createElement("TBODY");
  m_SelTable.appendChild(m_SelTb);
  var m_SelHeight=0;  while (xmlElement != null){
    var m_SelTr=document.createElement("TR");
    m_SelTb.appendChild(m_SelTr);
    var m_SelTd=document.createElement("TD");
    m_SelTr.appendChild(m_SelTd);
    with(m_SelTd){
      innerHTML=xmlElement.text;
      this.style.filter='';
      style.color=element.OptionForeColor;
      if(m_SelInput.value==xmlElement.text){
        style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType='+ element.OptionFilterStyle +', StartColorStr='+ element.OptionBackColorSel +', EndColorStr='+ element.OptionBackColor +')';
        style.color=element.OptionForeColorSel;
        m_SelectIndex=m_SelTr.sectionRowIndex;
      }
      style.paddingLeft=3;
      style.paddingRight=3;
      style.background=element.OptionBackColor;
      style.verticalAlign='MIDDLE';
      style.height=element.OptionHeight;
      m_SelHeight+=parseInt(element.OptionHeight);
      
      onmouseover=e_SelectionMouseOver;
      onmouseout=e_SelectionMouseOut;
      onclick=e_SelectionClick;
    }
    xmlElement=subMenuItems.nextNode();
  }//end while  m_SelDiv.onmouseover=e_SelectionMouseOver;
  m_SelDiv.scrollTop=0;
  
  with(m_SelDiv.style){
    position='ABSOLUTE';  
    zIndex=1;
    display='BLOCK';
    m_Body=element;
    while(m_Body.tagName!='BODY'){
      m_Body=m_Body.parentNode;
    }
    m_Body.onmouseover=e_SelectionMouseLeave;
    posTop=this.getClientRects()[0].top+parseInt(element.OptionHeight)+parseInt(m_Body.scrollTop)-2;
    posLeft=this.getClientRects()[0].left+parseInt(m_Body.scrollLeft)-2;
    scrollbarHighlightColor='buttonface';
    scrollbarShadowColor='buttonface';
    scrollbar3dLightColor='buttonhighlight';
    scrollbarTrackColor='#EEEEEE';
    scrollbarDarkShadowColor='buttonshadow';
    height=element.Height;
    width=element.Width;
    border='gray 1px solid';
    background=element.OptionBackColor;
    if(m_SelHeight>parseInt(m_SelDiv.style.height)){
      height=m_SelDiv.style.height;
      overflowY='SCROLL';
      //width=parseInt(getColWidth(m_selCol))+20;
    }
    else{
      height=m_SelHeight;
      overflowY='HIDDEN';
      //width=parseInt(getColWidth(m_selCol))+1;
    }
  }
  with(m_SelTable){
    cellSpacing=0;
    border=0
    style.width='100%';
    style.textAlign=element.OptionTextAlign;
    style.fontFamily=element.OptionFontFamily;
    style.fontSize=element.OptionFontSize;
    style.color=element.OptionForeColor;
    style.cursor=element.OptionCursor;
  }
}function CreateXmlSelectionDso(src){
 if(src.indexOf('.xml')<0){ return ; }
 m_XmlSelectionDso= new ActiveXObject("Microsoft.XMLDOM");
 m_XmlSelectionDso.async=false;
 m_XmlSelectionDso.load(src);
}function e_SelectionKeyDown(){
  event.cancelBubble=true;
  if(m_Selection==null){ return ; }
  switch(event.keyCode){
    case 38:
      SelectChange(m_SelectIndex-1)
    break;
    case 40:
      SelectChange(m_SelectIndex+1)
    break;
  }
}function e_SelectionMouseOver(){
  event.cancelBubble=true;
  if(event.srcElement.tagName!='TD'){ return ; }
  this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType='+ element.OptionFilterStyle +', StartColorStr='+ element.OptionBackColorSel +', EndColorStr='+ element.OptionBackColor +')';
  this.style.color=element.OptionForeColorSel;
}function e_SelectionMouseOut(){
  event.cancelBubble=true;
  if(m_SelInput.value==this.innerHTML){ return ;}
  this.style.filter='';
  this.style.color='';
}function e_SelectionClick(){
  event.cancelBubble=true;
  m_SelInput.value=this.innerHTML;
  m_SelectIndex=this.parentNode.sectionRowIndex;
  e_SelectionMouseLeave();
}function e_SelectionMouseLeave(){
  if(m_Selection!=null){
    element.removeChild(m_Selection);
    m_Selection=null;
  }
}function SelectChange(index){
  var index=parseInt(index);
  if(index<0 || index>=m_Selection.childNodes[0].tBodies[0].rows.length){ return; }
  var e=m_Selection.childNodes[0].tBodies[0].rows[m_SelectIndex].cells[0];
  e.style.filter='';
  e.style.color='';
  e=m_Selection.childNodes[0].tBodies[0].rows[index].cells[0];
  e.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType='+ element.OptionFilterStyle +', StartColorStr='+ element.OptionBackColorSel +', EndColorStr='+ element.OptionBackColor +')';
  e.style.color=element.OptionForeColorSel;
  m_SelInput.value=e.innerHTML;
  m_SelectIndex=index;  
}</Script>
</Component>

Answer 2

==============   NetSelection.htm 如下：<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
下拉列表控件：NetSelection
<BR><BR>
<TABLE cellSpacing=1 cellPadding=0 border=0 >
  
  <TR>
    <TD>
<DIV
  id=text1
  style="BEHAVIOR:url(NetSelection.htc)"
  value="阿波罗"
  width="150"
  XmlDataSrc="selection.xml"
  DataField="author">
</DIV> 
    </TD>
    <TD>
<DIV
  id=text2
  style="BEHAVIOR:url(NetSelection.htc)"
  value="3"
  width="20"
  OptionTextAlign="right"
  XmlDataSrc="selection.xml"
  DataField="price">
</DIV>    
    </TD>
  </TR>
</TABLE>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></BODY>
</HTML>=========  selection.xml 如下：<?xml version="1.0" encoding="gb2312" ?>
<Itemlist>
  <Item name="title"> 
    <SubMenu>The Busy Executive's Database Guide</SubMenu>
    <SubMenu>局域网安装与设置</SubMenu>
  </Item> 
  <Item name="price"> 
    <SubMenu>1</SubMenu>
    <SubMenu>2</SubMenu>
    <SubMenu>3</SubMenu>
    <SubMenu>4</SubMenu>
    <SubMenu>5</SubMenu>
  </Item>
  <Item name="author"> 
    <SubMenu>小邦</SubMenu>
    <SubMenu>b.bang</SubMenu>
    <SubMenu>Mayumi Ohno</SubMenu>
    <SubMenu>阿波罗</SubMenu>
<SubMenu>Lars Peterson</SubMenu>
<SubMenu>j.bang</SubMenu>
<SubMenu>Charlotte M. Cooper</SubMenu>
<SubMenu>人民邮电出版社</SubMenu>
  </Item>
</Itemlist>

Answer 3

功能就是模拟selection控件，用途那就根据自己的需要了。