给JS版dropdownlist加个onchange 事件

[anan221]

网上找了个js版dropdownList控件，里面少了onchange事件，哪位高手帮我加个onchange事件又急用。谢谢了。。给点思路也行

[anan221]

//下拉列表框项目选中和未选中时的样式表名称
var DDLIS_SELECTED_CLASSNAME = "ddlis_selected";
var DDLIS_UNSELECTED_CLASSNAME = "ddlis_unselected";


function CDropDownList_CItem(itemText, itemValue)
{
this.itemText = itemText;
this.itemValue = itemValue;
}


//objStr 当前对象的名称，字符串类型
//targetID 装载 DropDownList 的 HTML 元素标签 ID 名称
function CDropDownList(objStr, targetID)
{
this.objStr = objStr;

/*下拉列表框相关对象开始*/
this.target = document.getElementById(targetID);
this.targetAsst = null; //为了兼容浏览器及各标准，而设置的辅助层

this.titleBox = null;

this.controller = null; //控制器
this.controllerImg = null; //控制器图片对象
this.collapsedImgURL = ""; //下拉列表框收起时控制器图片地址
this.expandingImgURL = ""; //下拉列表框展开时控制器图片地址

this.listBoard = null; //下拉列表框项目框
this.listBoardAsst = null; //为了兼容浏览器及各标准，而设置的辅助层
/*下拉列表框相关对象结束*/

/*项目数据开始*/
this.itemArr = new Array(); //项目数组
this.selectedItemIndex = -1; //已经选中的项目数组索引
/*项目数据结束*/

this.ClearChildNodes = CDropDownList_ClearChildNodes;

/*创建下拉列表框的相关函数开始*/
this.Create = CDropDownList_Create;
this.BindTarget = CDropDownList_BindTarget;
this.BindTitleBox = CDropDownList_BindTitleBox;
this.BindController = CDropDownList_BindController;
this.BindListBoard = CDropDownList_BindListBoard;
this.SetStyle = CDropDownList_SetStyle;
/*创建下拉列表框的相关函数结束*/

this.CreateItemID = CDropDownList_CreateItemID; //根据项目索引创建项目的 ID 值

/*项目操作开始*/
this.AddItem = CDropDownList_AddItem;
this.AddItemFromItemData = CDropDownList_AddItemFromItemData;
this.ModifyItem = CDropDownList_ModifyItem;
this.DeleteItem = CDropDownList_DeleteItem;
this.SelectItem = CDropDownList_SelectItem;
this.GetSelectedItemIndex = CDropDownList_GetSelectedItemIndex;
this.GetSelectedItemText = CDropDownList_GetSelectedItemText;
this.GetSelectedItemValue = CDropDownList_GetSelectedItemValue;
this.GetItemCnt = CDropDownList_GetItemCnt;
this.SelectIndexChange = CDropDownList_SelectIndexChange;
/*项目操作结束*/

this.skipDocumentBodyEvent = false; //在 document.body 上触发鼠标事件时，是否跳过该鼠标事件
this.OnChngListBoard = CDropDownList_OnChngListBoard; //展开或收起下拉列表框项目框
this.OnItemMouseOver = CDropDownList_OnItemMouseOver;
this.OnItemMouseOut = CDropDownList_OnItemMouseOut;
this.OnItemSelected = CDropDownList_OnItemSelected;
this.SetEventState = CDropDownList_SetEventState;


//为 document.body 设置鼠标事件
//使 listBoard 在展开时，点击 document.body 时可以收起 listBoard
// var mousedownEvent = document.body.getAttribute("onmousedown");
// if (mousedownEvent == null)
// {
// mousedownEvent = this.objStr + ".OnChngListBoard('documentBody');";
// }
// else
// {
// mousedownEvent += ";" + this.objStr + ".OnChngListBoard('documentBody');";
// }
//
// if (window.attachEvent)
// {
// document.body.attachEvent("onmousedown", function (){eval(mousedownEvent);});
// }
// else
// {
// document.body.setAttribute("onmousedown", mousedownEvent);
// }
}


//消除 node 结点下的所有子结点
function CDropDownList_ClearChildNodes(node)
{
while (node.hasChildNodes())
{
node.removeChild(node.childNodes[0]);
}
}


//在 target 上创建控件
//collapsedImgURL 下拉列表框收起时控制器图片地址
//expandingImgURL 下拉列表框展开时控制器图片地址
function CDropDownList_Create(collapsedImgURL, expandingImgURL)
{
var targetAsstID = this.target.id + "_asst";
var titleBoxID = this.target.id + "_titleBox";
var controllerID = this.target.id + "_controller";
var listBoardID = this.target.id + "_listBoard";

//不能拆开分步插入，那样会使先前插入的对象消失
//浮动不能通过脚本的 style.float 指定，所以在这里指定
//overflow、text-align 属性为固定值，所以在这里一并指定
this.target.innerHTML = "<div id=\"" + targetAsstID + "\" style=\"float:left;overflow:hidden;text-align:left;\">" +
" <div id=\"" + titleBoxID + "\" style=\"float:left;overflow:hidden;text-align:left;\">" +
" </div>" +
" <div id=\"" + controllerID + "\" style=\"float:right;overflow:hidden;text-align:center;\">" +
" </div>" +
"</div>";
this.BindTarget(targetAsstID);
this.BindTitleBox(titleBoxID);
this.BindController(controllerID, collapsedImgURL, expandingImgURL);


//创建下拉列表框项目框
var listBoardAsst = document.createElement("div");
listBoardAsst.style.textAlign = "left";

var listBoard = document.createElement("div");
listBoard.id = listBoardID;
listBoard.style.display = "none"; //默认 listBoard 没有展开
listBoard.appendChild(listBoardAsst);

document.body.appendChild(listBoard);
this.BindListBoard(listBoard, listBoardAsst);
}


function CDropDownList_BindTarget(targetAsstIDOrTargetAsst)
{
this.targetAsst = (typeof(targetAsstIDOrTargetAsst) == "string") ? document.getElementById(targetAsstIDOrTargetAsst) : targetAsstIDOrTargetAsst;

//设置鼠标事件，使点击 targetAsst 时，可以展开或收起下拉列表框项目框
var targetAsstMouseDownEvent = this.objStr + ".SetEventState(true);" + this.objStr + ".OnChngListBoard('self');";
var targetAsstMouseUpEvent = this.objStr + ".SetEventState(false);";
if (window.attachEvent)
{
this.targetAsst.attachEvent("onmousedown", function (){eval(targetAsstMouseDownEvent);return false;});
this.targetAsst.attachEvent("onmouseup", function (){eval(targetAsstMouseUpEvent);return false;});
}
else
{
this.targetAsst.setAttribute("onmousedown", targetAsstMouseDownEvent + "return false;");
this.targetAsst.setAttribute("onmouseup", targetAsstMouseUpEvent + "return false;");
}
}


function CDropDownList_BindTitleBox(titleBoxIDOrTitleBox)
{
this.titleBox = (typeof(titleBoxIDOrTitleBox) == "string") ? document.getElementById(titleBoxIDOrTitleBox) : titleBoxIDOrTitleBox;
this.titleBox.style.cursor = "default";
this.ClearChildNodes(this.titleBox);
}


//绑定控制器，默认 listBoard 没有展开
function CDropDownList_BindController(controllerIDOrController, collapsedImgURL, expandingImgURL)
{
this.controller = (typeof(controllerIDOrController) == "string") ? document.getElementById(controllerIDOrController) : controllerIDOrController;
this.collapsedImgURL = collapsedImgURL;
this.expandingImgURL = expandingImgURL;
this.ClearChildNodes(this.controller);

var img = document.createElement("IMG");
img.src = collapsedImgURL; //因为默认 listBoard 没有展开
img.style.cursor = "pointer";

this.controllerImg = img;
this.controller.appendChild(img);
}


//绑定 listBoard，默认 listBoard 没有展开
function CDropDownList_BindListBoard(listBoardIDOrListBoard, listBoardAsstIDOrListBoardAsst)
{
this.listBoard = (typeof(listBoardIDOrListBoard) == "string") ? document.getElementById(listBoardIDOrListBoard) : listBoardIDOrListBoard;
this.listBoardAsst = (typeof(listBoardAsstIDOrListBoardAsst) == "string") ? document.getElementById(listBoardAsstIDOrListBoardAsst) : listBoardAsstIDOrListBoardAsst;

this.listBoard.style.display = "none"; //因为，默认 listBoard 没有展开，为避免与 BindController 中的指示不一致，即使前面已经设置，这里仍再设置一次
}

[anan221]

//targetWidth、targetHeight 包含 borderWidth
//targetWidth、targetHeight、borderWidth、titleBoxWidth，数字类型，其它控件的长宽由这四个参数计算得出
//borderClr 边框颜色
//bgClr 边框大小
function CDropDownList_SetStyle(targetWidth, targetHeight, borderWidth, titleBoxWidth, borderClr, bgClr)
{
this.target.style.width = targetWidth + "px";
this.target.style.height = targetHeight + "px";
this.targetAsst.style.borderWidth = borderWidth + "px";
this.targetAsst.style.borderStyle = "solid";
this.targetAsst.style.borderColor = borderClr;
this.targetAsst.style.backgroundColor = bgClr;

this.titleBox.style.width = titleBoxWidth + "px";
this.titleBox.style.height = (targetHeight - borderWidth*2) + "px";

this.controller.style.width = (targetWidth - borderWidth*2 - titleBoxWidth) + "px";
this.controller.style.height = (targetHeight - borderWidth*2) + "px";

this.listBoard.style.width = targetWidth + "px";
this.listBoardAsst.style.borderWidth = borderWidth + "px";
this.listBoardAsst.style.borderStyle = "solid";
this.listBoardAsst.style.borderColor = borderClr;
this.listBoardAsst.style.backgroundColor = bgClr;
this.listBoard.style.height = "100px";
this.listBoard.style.overflowX = "auto";
}


//根据项目索引创建项目的 ID 值
function CDropDownList_CreateItemID(itemIndex)
{
return this.target.id + "_item_" + itemIndex;
}


//追加一个项目
function CDropDownList_AddItem(itemText, itemValue)
{
var newItemIndex = this.itemArr.length;
this.itemArr[newItemIndex] = new CDropDownList_CItem(itemText, itemValue);

this.AddItemFromItemData(newItemIndex);
}


//将 itemArr 中的一项数据添加到下拉列表框项目框中
//此函数不应该公开，否则可能造成实际数据与显示的不一致
function CDropDownList_AddItemFromItemData(itemIndex)
{
var itemText = this.itemArr[itemIndex].itemText;
var itemValue = this.itemArr[itemIndex].itemValue;

if (this.listBoardAsst)
{
var li = document.createElement("div");
li.style.cursor = "default";
li.style.width = "100%";
li.className = DDLIS_UNSELECTED_CLASSNAME;
li.id = this.CreateItemID(itemIndex);

//设置鼠标事件
var liMouseDownEvent = this.objStr + ".SetEventState(true);"; //阻止 listBoard 收起
//onmouseup 时主动收起 listBoard，因为如果 listBoard 展开到了 body 的 margin 等不响应 document.body 鼠标事件的区域，就无法自动收起 listBoard 了。
var liMouseUpEvent = this.objStr + ".OnItemSelected(" + itemIndex + ");" +
this.objStr + ".OnChngListBoard('self');" +
this.objStr + ".SetEventState(false);";
var liMouseOverEvent = this.objStr + ".OnItemMouseOver(document.getElementById('" + li.id + "'));";
var liMouseOutEvent = this.objStr + ".OnItemMouseOut(document.getElementById('" + li.id + "'));";
if (window.attachEvent)
{
li.attachEvent("onmousedown", function (){eval(liMouseDownEvent);return false;});
li.attachEvent("onmouseup", function (){eval(liMouseUpEvent);return false;});
li.attachEvent("onmouseover", function (){eval(liMouseOverEvent);return false;});
li.attachEvent("onmouseout", function (){eval(liMouseOutEvent);return false;});
}
else
{
li.setAttribute("onmousedown", liMouseDownEvent + "return false;");
li.setAttribute("onmouseup", liMouseUpEvent + "return false;");
li.setAttribute("onmouseover", liMouseOverEvent + "return false;");
li.setAttribute("onmouseout", liMouseOutEvent + "return false;");
}

var t = document.createTextNode(itemText);
li.appendChild(t);
this.listBoardAsst.appendChild(li);
}
}


//修改一个项目
function CDropDownList_ModifyItem(itemIndex, newItemText, newItemValue)
{
if (itemIndex < 0 || itemIndex >= this.itemArr.length)
{
return;
}

var li = document.getElementById(this.CreateItemID(itemIndex)); //要修改的项目对象
this.ClearChildNodes(li);
var t = document.createTextNode(newItemText);
li.appendChild(t);
this.itemArr[itemIndex].itemText = newItemText;
this.itemArr[itemIndex].itemValue = newItemValue;

if (itemIndex == this.GetSelectedItemIndex())
{
//修改了的项目就是已经选中了的项目，要重新选中，以便更新显示选中项目的文字
this.SelectItem(itemIndex);
}
}


//删除一个项目
function CDropDownList_DeleteItem(itemIndex)
{
if (itemIndex < 0 || itemIndex >= this.itemArr.length)
{
return;
}

this.itemArr.splice(itemIndex, 1);

//由于下拉列表框项目框中的项目是与 this.itemArr 的索引相关的
//而删除数组会引起索引的改变，故重新生成下拉列表框中的项目
this.ClearChildNodes(this.listBoardAsst);
for (var i = 0; i < this.itemArr.length; i++)
{
this.AddItemFromItemData(i);
}

if (itemIndex < this.GetSelectedItemIndex())
{
//删除的项目是在已经选中的项目的前面
this.SelectItem(this.GetSelectedItemIndex() - 1);
}
else if (itemIndex == this.GetSelectedItemIndex())
{
//删除的项目就是已经选中的项目
this.SelectItem(-1);
}
}


//选中一个项目
function CDropDownList_SelectItem(itemIndex)
{
if (itemIndex < 0 || itemIndex >= this.itemArr.length)
{
this.ClearChildNodes(this.titleBox);
this.titleBox.appendChild(document.createTextNode(""));
this.selectedItemIndex = -1;
}
else
{
this.ClearChildNodes(this.titleBox);
var t = document.createTextNode(this.itemArr[itemIndex].itemText);
this.titleBox.appendChild(t);
this.selectedItemIndex = itemIndex;
}
}


//返回选中项目的索引
function CDropDownList_GetSelectedItemIndex()
{
return this.selectedItemIndex;
}


//返回选中项目的文字
function CDropDownList_GetSelectedItemText()
{
if (this.selectedItemIndex < 0 || this.selectedItemIndex >= this.itemArr.length)
{
return null;
}

return this.itemArr[this.selectedItemIndex].itemText;
}


//返回选中项目的值
function CDropDownList_GetSelectedItemValue()
{
if (this.selectedItemIndex < 0 || this.selectedItemIndex >= this.itemArr.length)
{
return null;
}

return this.itemArr[this.selectedItemIndex].itemValue;
}


//返回项目数
function CDropDownList_GetItemCnt()
{
return this.itemArr.length;
}

[anan221]

//当改变下拉列表框项目框展开收起时
function CDropDownList_OnChngListBoard(sender)
{
if (sender == "documentBody")
{
//事件来源于 document.body
if (this.skipDocumentBodyEvent || this.listBoard.style.display == "none")
{
//如果需要跳过此事件（controller 也触发了该事件就该跳过）
//或者 listBoard 本来就没有展开
return;
}
}

if (this.listBoard.style.display == "none")
{
//已经收起，展开之
//确定展开位置
var x = this.targetAsst.offsetLeft;
var y = this.targetAsst.offsetTop + this.targetAsst.offsetHeight;
var pe = this.targetAsst.offsetParent;
while (pe)
{
x += pe.offsetLeft;
y += pe.offsetTop;
pe = pe.offsetParent;
}
this.listBoard.style.position = "absolute";
this.listBoard.style.left = x + "px";
this.listBoard.style.top = y + "px";
this.listBoard.style.display = "block";

this.controllerImg.src = this.expandingImgURL;
}
else
{
//已经展开，收起之
this.listBoard.style.display = "none";
this.controllerImg.src = this.collapsedImgURL;
}
}


//当鼠标移到项目上时
function CDropDownList_OnItemMouseOver(sender)
{
sender.className = DDLIS_SELECTED_CLASSNAME;
}


//当鼠标移出项目时
function CDropDownList_OnItemMouseOut(sender)
{
sender.className = DDLIS_UNSELECTED_CLASSNAME;
}


function CDropDownList_OnItemSelected(selectedItemIndex)
{
this.SelectItem(selectedItemIndex);
}


//skipDocumentBodyEvent 表示是否允许 document.body 事件，默认 false。
function CDropDownList_SetEventState(skipDocumentBodyEvent)
{
this.skipDocumentBodyEvent = skipDocumentBodyEvent;
}

function CDropDownList_SelectIndexChange()
{
var changeEvent = document.body.getAttribute("onchange");
if (changeEvent == null)
{
changeEvent = this.objStr + ".OnChngListBoard('documentBody');";
}
else
{
changeEvent += ";" + this.objStr + ".OnChngListBoard('documentBody');";
}

if (window.attachEvent)
{
document.body.attachEvent("onchange", function (){eval(changeEvent);});
}
else
{
document.body.setAttribute("onchange", changeEvent);
}
}

[jol_boy]

CDropDownList_SelectIndexChange()
这个不就是change事件么？？？？额滴个神，代码太多。。。。

[anan221]

这个方法是我自己加进去的没有用的

[xsnzp]

在load事件里加上
CDropDownList.Attributes.Add("onchange","处理事件");

[anan221]

不是吧，看问题再说话

[Even713]

帮你顶一下，你这个控件什么样啊

[anan221]

d代码太多，传不上来

[rjzou2006]

直接加入onchange了.

[西安风影]

贴你源码，大家才能帮你。

[anan221]

再顶，难道没有人帮我看下啊