博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

html dropdownlist 一个完整的javascript类实现

Posted on 2006-07-12 20:03  daniel-shen  阅读(771)  评论(0)    收藏  举报

<html>
<head>
<SCRIPT TYPE="text/javascript">
function getLeftPostion( theObj )
{
var pos = 0;
while ( theObj != null )
{
pos += theObj.offsetLeft;
//get the Object which contain theObj.
theObj = theObj.offsetParent;
}
return pos;
}
function getTopPostion( theObj )
{
var pos = 0;
while ( theObj != null )
{
pos += theObj.offsetTop;
//get the Object which contain theObj.
theObj = theObj.offsetParent;
}
return pos;
}
function checkVersion()
{
var isBadVersion=true;
var curVer=navigator.appVersion;
var pos=parseInt(curVer.indexOf("MSIE"));
if (pos>=1)
{
var intVer=parseInt(curVer.charAt(pos+5));
if (intVer>=5)
{ isBadVersion=false;}
}
if (isBadVersion)
{
var msg="This page may not be displayed properly:"+
" This product requires Microsoft Internet Explorer 5 or later browser only.";
alert(msg);
}
}
//check the browser version
checkVersion();
// the array of comboBoies
theArray = new Array();
function combobox(objId, objHandler)
{
 this.comObj = document.all[objId];
 this.comObj.selectedIndex = -1;
 this.getValue = getValue;
 this.doResize = doResize;
 this.doChange = doChange;
 this.loseFocus = loseFocus;
 this.doSelectIdx = doSelectIdx;
 this.focus = focus;
 var strMsg="";
//------------------------------------------------------------------------------------------------------
// create the text object
//------------------------------------------------------------------------------------------------------
 var txtObjIdName = objId + "_text";
 if (document.all[txtObjIdName] != null)
 {
  strMsg="The following id: '" + txtObjIdName +"' is used internally by the Combo Box!\r"+
   "Use of this id in your page may cause malfunction. Please use another id for your controls.";
  alert(strMsg);
 }
 var txtInner = "<INPUT type='text' id=" + txtObjIdName + " name=" + txtObjIdName +
  " onblur='" + objHandler + ".loseFocus()' " +
  " style='display: none; position: absolute' value='' >";
 this.comObj.insertAdjacentHTML("afterEnd", txtInner);
 this.txtObj = document.all[txtObjIdName];
//------------------------------------------------------------------------------------------------------
// end
//------------------------------------------------------------------------------------------------------
 this.beResizing = false;
 this.doResize();
 theArray[theArray.length] = this;
}

function loseFocus()
{
 var theComObj = this.comObj;
 var theTxtObj = this.txtObj;
 var i;
 theComObj.selectedIndex = -1;
 if (theTxtObj.value == "")
 {
  return;
 }
 var optLen = theComObj.options.length;
 for (i=0; i<optLen; i++)
 {
  var comVal = theComObj.options[i].text;
  var txtVal = theTxtObj.value;
  if (comVal == txtVal)
  {
   theComObj.selectedIndex = i;
   return;
  }
 }
}
function doResize()
{
 if (!this.beResizing)
 {
  this.beResizing = true;
  this.txtObj.style.display="none";
  this.comObj.style.position="static";
  this.txtObj.style.posLeft = getLeftPostion(this.comObj);
  this.txtObj.style.posTop = getTopPostion(this.comObj) + 1;
  this.txtObj.style.posWidth = this.comObj.offsetWidth - 16;
  this.txtObj.style.posHeight = this.comObj.offsetHeight;
  this.comObj.style.position ="absolute";
  this.comObj.style.posLeft = this.txtObj.style.posLeft;
  this.comObj.style.posTop = this.txtObj.style.posTop;
  this.offWidth = this.comObj.offsetWidth;
  var strRect = "rect(0 "+(this.comObj.offsetWidth)+" "+ this.comObj.offsetHeight +
   " "+(this.txtObj.style.posWidth - 2 )+")";
  this.comObj.style.clip = strRect;
  this.txtObj.style.display="";
  this.beResizing = false;
 }
}
function doChange()
{
 var idx = this.comObj.selectedIndex;
 var opt = this.comObj.options[idx];
 this.txtObj.value = opt.text;
 this.txtObj.focus();
 //this.txtObj.select();
 this.comObj.selectedIndex=-1;
}
function getValue()
{
 return this.txtObj.value;
}
function doSelectIdx(i)
{
 var optLen = this.comObj.options.length;
 if ((i >=0) && (i < optLen))
 {
  this.comObj.selectedIndex = i;
  this.txtObj.value = this.comObj.options[i].text;
  return;
 }
 this.txtObj.value = "";
}
function focus()
{
 this.txtObj.focus();
}
/* resize all combobox when window be resized */
function resetAllSize()
{
 var i;
 for (i=0; i < theArray.length; i++)
 {
  theArray[i].doResize();
 }
}
</SCRIPT>
</head>
<body>
<BODY onload="init();">
<form name="form1">

<select id="comboBox1" style="POSITION: absolute;
onResize="if (combox1!=null) {combox1.doResize();}"
onChange="if (combox1!=null) {combox1.doChange();}" name="select2">
<option value=www.5DeDesign.com selected>www.5DeDesign.com</option>
<option value=www.baojidesign.com>www.baojidesign.com</option>
<option value=www.sina.com.cn>www.sina.com.cn</option>
</select>
<br><br>
<input type="submit" value="submit" onclick="getselectedvalue()">
<SCRIPT>
var combox1,combox2;
function init()
{
combox1 = new combobox("comboBox1", "combox1");
combox1.doSelectIdx(-1);
}
function getselectedvalue()
{
 alert(document.all.comboBox1_text.value);
}
</SCRIPT>
</form>
</body>
</body>