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();
	}
}