Ecology HTML表单选择框改变事件。

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

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

<input id="$field6973$" class="InputStyle" name="field6973" value="[必填]会议类型" type="text" />

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

<tr id="trMeetingRoom" abp="1122">
  <td class="fname" abp="1123">
    <input id="$label6875$" class="Label" abp="1124" name="label6875" value="参会会场" type="text" />
  </td>
  <td class="fvalue" colspan="3" abp="1125">
    <input id="$field6875$" class="InputStyle" abp="1126" name="field6875" value="[可编辑]参会会场" type="text" />
  </td>
</tr>
<tr id="trMeetingMain" abp="1127">
  <td class="fname" abp="1128">
    <input id="$label6876$" class="Label" abp="1129" name="label6876" value="会议汇报人" type="text" />
  </td>
  <td class="fvalue" colspan="3" abp="1130">
    <input id="$field6876$" class="InputStyle" abp="1131" name="field6876" value="[可编辑]会议汇报人" type="text" />
  </td>
</tr>

??

?第二步：编写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();
	}
}

?

?