input显示、隐藏兼容性问题

qingqingcao22009 2013-11-25 03:40:22

<%--计费模式--%>

		<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下都没有显示出来。

怎么解决？请高手指点

...全文

199 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

fishnobone 2013-11-26

打赏
举报

引用 2 楼 qingqingcao22009 的回复:

引用 1 楼 u011617213 的回复:
document.getElementById("showId").style.display="block";
试了一下，不行

我怎么都是可行的呢，爱莫能助了，mark一下

qingqingcao22009 2013-11-26

打赏
举报

<%--计费模式--%>
		<aui:select label="product-billingmode" name="billingMode" id="billingMode" showEmptyOption="false" style="width:350px" onchange="seltype(this)">
		  	<aui:option label="product.billingmode.by.time" value="<%=ProductBillingMode.BY_TIME.toString()%>" />
			<aui:option label="product.billingmode.month" value="<%=ProductBillingMode.MONTH.toString()%>" />
			<aui:option label="product.billingmode.limit.month" value="<%=ProductBillingMode.LIMIT_MONTH.toString()%>" />
		</aui:select>
	

		<%--计次有效时长--%>
		<div id="showId" style="dsiplay: block">
			<aui:input  label="product-effectiveduration" name="effectiveDuration" id="effectiveDuration" type="text" style="width:350px" suffix="product.effectiveduration.hour" value="72">
				<aui:validator name="custom" errorMessage="product.effectiveduration.errormessage">
					function(val, fieldNode, ruleValue){
						return effectivePattern.test(val);
					}
				</aui:validator>
			</aui:input>
		</div>

function seltype(select)
   {
    var ID=select.options[select.selectedIndex].value;
    if(ID==1)
    {
        document.getElementById("showId").style.display="block";
        document.getElementById("bill").style.display="none";
         document.getElementById("jicitime").style.display="block";
    }
    if(ID==2||ID==3)
    {
        document.getElementById("showId").style.display="none";
        document.getElementById("bill").style.display="block";
         document.getElementById("jicitime").style.display="none";
    }

qingqingcao22009 2013-11-26