自己写的js～～可输可选的下拉框。第一次发自己的代码，轻点拍砖，第一次会疼的。

qiangv 2008-01-05 12:56:55

汗，还得分开，大家将就着看。
写c++养成习惯了，一个分号就一行，还得按照代码断行～～～～
导致行数太多，在公司统计工作量的时候，我都十分害羞～～～～

写这个的目的是：自己做的项目中有dropdownlist的地方，都要改成可以输入，根据输入的值自动换成相应的项。
而项目中这种地方有几十个，就弄了个，还没测试完，自己的需求还没实现。



<html>

	<head>

	</head>

	<body>

	<select id="ss">

	<Option>上海</Option>

	<Option>天津</Option>

	<Option>合肥</Option>

	<Option>广东</Option>

	<Option>杭州</Option>

	<Option>福建</Option>

	<Option>厦门</Option>

	<Option>辽宁</Option>

	<Option>黑龙江</Option>

	<Option>海南</Option>

	<Option>乌鲁木齐</Option>

<Option>哈尔滨</Option>

<Option>宁夏</Option>

<Option>西藏</Option>

<Option>河北</Option>

<Option>河南</Option>

<Option>辽宁</Option>

<Option>安徽</Option>

<Option>山西</Option>

<Option>江西</Option>

	</select>

	sdsddsdsds

	sdsdsddsds

	sdsd<br />

	dssd



	<select id="ccc">

		<option>dd</option>

		<option>dd32</option>

		<option>dd44</option>

	</select>

	

	

<br/><br/><br/><br/><br/><br/><br/>

<select id="bbb">

	<option>hello world</option>

	<option>hello china</option>

	<option>hello bitch</option>

	<option>hello woman</option>

</select>

<select id="ttt">

	<option>money</option>

	<option>love</option>

	<option>girl</option>

	<option>boy</option>

	<option>hell</option>

</select>			

	<div id="msg">d

	</div>

	</body>

</html>

<script language="javascript">

/*

author: qiangv

qq:			35771991

email/msn:qiangv@hotmail.com

www.itmancn.com

*/

function GetEvent()

{

	if(document.all)

	{

		return window.event;

	}

	

  func = GetEvent.caller;            

	while(func != null)

	{

		var arg0 = func.arguments[0];

    if(arg0)

    {

    	if((arg0.constructor == Event || arg0.constructor == MouseEvent)

    		|| (typeof(arg0) == "object" && arg0.preventDefault && arg0.stopPropagation))

    	{

    		return arg0;

    	}

    }

    

    func=func.caller;

  }

  

  return null;

}



function getAbsoluteCoords (e) {

  var t = e.offsetTop; 

  var l = e.offsetLeft; 

  var w = e.offsetWidth; 

  var h = e.offsetHeight;

  while(e = e.offsetParent) 

  {

  	t += e.offsetTop; 

  	l += e.offsetLeft; 

  };

   

  return { top: t, left: l, width: w, height: h, bottom: t + h, right: l + w };

}

function OptionItem(strText, strValue, nOptionIndex)

{	

	OptionItem.prototype.Active = function(bActive)

	{

		if(bActive)

		{

			var item = document.getElementById(this.domInstanceId);

			item.style.fontWeight = "bold";

			item.style.backgroundColor = "#3366cc";

			item = null;

		}

		else

		{

			// 若选中状态则返回

			if(this.selected)

			{

				//return;

			}

			var item = document.getElementById(this.domInstanceId);

			item.style.fontWeight = "normal";

			item.style.backgroundColor = "#ffffff";

			item = null;

		}

	};

	OptionItem.prototype.ScrollIntoView = function(bTop)

	{

		document.getElementById(this.domInstanceId).scrollIntoView(bTop);

	}

	OptionItem.prototype.Initialize = function(strText, strValue, nOptionIndex)

	{

		this.parentInstance = null;

		this.selected = false;

		this.optionIndex = nOptionIndex;

		this.text = strText;

		this.value = strValue;

		this.domInstanceId = OptionItem.prefixId + OptionItem.index;

		OptionItem.index ++;

		var divItem = document.createElement("DIV");

		divItem.instance = this;

		with(divItem)

		{

			// 设置ID

			id = this.domInstanceId;

			// 设置text

			innerHTML = this.text;

			// 设置鼠标样式

			style.cursor = "default";

			style.fontSize = "13px";

		};

		divItem.onmouseover = function()

		{

			// this.style.fontWeight = "bold";

			this.instance.OnMouseOver();

		};

		divItem.onmouseout = function()

		{

			this.instance.OnMouseOut();

			return false;

		};

		OptionItem.prototype.OnMouseOut = function()

		{

			this.Active(false);

		};

		divItem.test = function(evt)

		{

			

		};

		

		divItem.onmousedown = function()

		{

			this.instance.OnMouseDown();

			return false;

		};

		

		OptionItem.prototype.OnMouseOver = function()

		{

			this.Active(true);

		};

		

		OptionItem.prototype.OnMouseDown = function()

		{

			this.parentInstance.OnItemClick(this.optionIndex);

		};

		

		OptionItem.prototype.Show = function()

		{

			var domInstance = document.getElementById(this.domInstanceId);

			if(domInstance)

			{

				with(domInstance)

				{

					style.display = "block";

					style.visibility = "visibile";

				}

			}

		};

		

		OptionItem.prototype.Hide = function()

		{

			var domInstance = document.getElementById(this.domInstanceId);

			if(domInstance)

			{

				with(domInstance)

				{

					style.display = "none";

					style.visibility = "hidden";

				}

			}

		};

		

		OptionItem.prototype.Test = function()

		{

			return true;

		};

		

		OptionItem.prototype.GetDomInstance = function()

		{

			var domInstance = document.getElementById(this.domInstanceId);

			if(domInstance)

			{

				return domInstance;

			}

			else

			{

				return null;

			}

		};

		

		OptionItem.prototype.SetParentInstance = function(parentInstance)

		{

			this.parentInstance = parentInstance;

		};

		

		// 初始化

		document.body.insertBefore(divItem, null);

	};

	

	OptionItem.prototype.GetId = function()

	{

		return this.domInstanceId;

	};



	this.Initialize(strText, strValue, nOptionIndex);

}

// id 前缀

OptionItem.prefixId = "optionItem";

// 计数

OptionItem.index = 0;