html设置选择框事件,Ecology HTML表单选择框改变事件。

本示例是根据会议类型控制相关字段的显示与隐藏，如何会议类型是“视频会议”，则与视频会议相关的字段显示出来，如果是其他类型的会议，则与视频会议相关的字段隐藏起来。

第一步：首先通过管理员在HTML表单中找到“会议类型”选择框字段及视频会议相关字段的所在行，我的“会议类型”字段信息如下：

?我的视频会议相关字段所在行信息如下，注意每行都需要有一个ID标识一下。

??

?第二步：编写JS控制代码

如下是我的JS控制代码，注意在表单加载的时候就需要调用一次显示/隐藏事件。

window.onload = function() {

var oMeetingType = document.getElementById("field6973");// 获取“会议类型对象”

// 使用追加事件的方式添加自定义事件，在原有事件之后执行。

if (oMeetingType.addEventListener){// 非IE浏览器

oMeetingType.addEventListener("change", meetingTypeEvent, false);

} else {// IE流程器

oMeetingType.attachEvent("onchange", meetingTypeEvent);

}

meetingTypeEvent();

};

/**

* 根据会议类型控制视频会议相关字段的显示与隐藏。

*/

function meetingTypeEvent() {

var oMeetingType = document.getElementById("field6973");// 获取“会议类型对象”

var mtTypeText = oMeetingType.options[oMeetingType.selectedIndex].text;

// 如果是类型是“视频会议”

if (mtTypeText == "视频会议") {

// 显示视频会议相关字段所在行

jQuery("#trMeetingRoom").show();

jQuery("#trMeetingMain").show();

}

// 如果是

else {

// 隐藏视频会议相关字段所在行

jQuery("#trMeetingRoom").hide();

jQuery("#trMeetingMain").hide();

}

}

?

?

原文：http://shuitao-cao.iteye.com/blog/2184011