zwq 2015-02-06
本示例是根据会议类型控制相关字段的显示与隐藏,如何会议类型是“视频会议”,则与视频会议相关的字段显示出来,如果是其他类型的会议,则与视频会议相关的字段隐藏起来。
第一步:首先通过管理员在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(); } }