日期:2014-05-17  浏览次数:20842 次

input显示、隐藏兼容性问题
<%--计费模式--%>
<aui:select label="product-billingmode" name="billingMode" id="billingMode" showEmptyOption="false" style="width:350px">
<c:if test='${1==model.billingMode}'>
   <aui:option label="product.billingmode.by.time" value="<%=ProductBillingMode.BY_TIME.toString()%>" onclick="showInput()" selected="true"/>
<aui:option label="product.billingmode.month" value="<%=ProductBillingMode.MONTH.toString()%>" onclick="disableInput()"/>
<aui:option label="product.billingmode.limit.month" value="<%=ProductBillingMode.LIMIT_MONTH.toString()%>" onclick="disableInput()"/>
</c:if>
<c:if test='${2==model.billingMode}'>
   <aui:option label="product.billingmode.by.time" value="<%=ProductBillingMode.BY_TIME.toString()%>" onclick="showInput()" />
<aui:option label="product.billingmode.month" value="<%=ProductBillingMode.MONTH.toString()%>" onclick="disableInput()" selected="true"/>
<aui:option label="product.billingmode.limit.month" value="<%=ProductBillingMode.LIMIT_MONTH.toString()%>" onclick="disableInput()"/>
</c:if>
<c:if test='${3==model.billingMode}'>
   <aui:option label="product.billingmode.by.time" value="<%=ProductBillingMode.BY_TIME.toString()%>" onclick="showInput()" />
<aui:option label="product.billingmode.month" value="<%=ProductBillingMode.MONTH.toString()%>" onclick="disableInput()" />
<aui:option label="product.billingmode.limit.month" value="<%=ProductBillingMode.LIMIT_MONTH.toString()%>" onclick="disableInput()" selected="true"/>
</c:if>
</aui:select>
<%--计次有效时长--%>
<div id="showId">
<c:if test='${1==model.billingMode}'>
<aui:input  label="product-effectiveduration" name="effectiveDuration" value="${model.effectiveDuration}"  id="effectiveDuration" type="text" style="width:350px" suffix="product.effectiveduration.hour">
<aui:validator name="custom" errorMessage="product.effectiveduration.errormessage">
function(val, fieldNode, ruleValue){
return effectivePattern.test(val);
}
</aui:validator>
</aui:input>
</c:if>
</div>


这里的showInput()和disableinput()分别是:
<%--显示或隐藏计次有效时长字段--%>
function showInput(){
document.getElementById("showId").style.display="inline";
}
function disableInput(){
document.getElementById("showId").style.display="none";
}

这里存在的问题是:
1、当初始时“计费模式”默认为“计次”时,在chrome、ie、ff中都可以显示出“计次有效时长”输入框,这时,改变“计费模式”为其他,在ff下,“计次有效时长”可以消失,而ie、chrome下仍显示。
2、当初始时“计费模式”默认为非“计次”时,在chrome、ie、ff下都不会显示“计次有效时长”输入框,但是,改变“计费模式”为“计次”后,“计次有效时长”输入框在ie、ff、chrome下都没有显示出来。

怎么解决?请高手指点

------解决方案--------------------
document.getElementById("showId").style.display="block";