新手求帮助,刚开始学习,select 里的onchange事件隐藏
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr >
<td width="20%" height="30" align="right" >产品系列</td>
<td width="20%">
<select name="commodityCategory" type="text" id="commodityCategory" value="${commodityCategory}" style="width:140px;" verify="NotNull"/>
<option value="1">化妆品</option>
<option value="2">服装</option>
</select>
</tr>
<tr>
<td width="20%" height="30" align="right" >适用肤质</td>
<td><input style="width:240px;" name="serveTheTurnSkin" type="text" id="serveTheTurnSkin" value="" />
</tr>
<tr>
<td width="20%" height="30" align="right" >型号</td>
<td><input name="model" type="text" id="model" value=""/>
<td width="20%" height="30" align="right" >颜色</td>
<td><input name="color" type="text" id="color" value=""/>
</tr>
</table>
怎么实现选择化妆品的时候隐藏型号和颜色俩个文本,选择服装的时候隐藏适用肌肤文本。
[解决办法]
不知道你会不会jquery,我用jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" src="jquery-1.4.4.js"></script>
<script language="javascript">
$(function(){
$("#commodityCategory").change(function(){
var value = this.value;
if(value == 1){
$("#1").hide();
$("#2").show();
}else if(value == 2){
$("#1").show();
$("#2").hide();
}
});
})
</script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr >
<td width="20%" height="30" align="right" >产品系列</td>
<td width="20%"><select id="commodityCategory"/>
<option value="1">化妆品</option>
<option value="2">服装</option>
</select>
</tr>
<tr id="1">
<td width="20%" height="30" align="right" >适用肤质</td>
<td><input style="width:240px;" name="serveTheTurnSkin" type="text" id="serveTheTurnSkin" value="" />
</tr>
<tr id="2">
<td width="20%" height="30" align="right" >型号</td>
<td><input name="model" type="text" id="model" value=""/>
<td width="20%" height="30" align="right" >颜色</td>
<td><input name="color" type="text" id="color" value=""/>
</tr>
</table
>
</body>
</html>
有谢数据为了方便改了,你自己改回来就好,如果不会jquery,你就在网上下一个,红色的地方写jquery的位置
[解决办法]
function showOrhIde(obj){ if(obj.value=='化妆品') { document.getElementById('model').style.display = 'none'; document.getElementById('color').style.display = 'none'; document.getElementById('serveTheTurnSkin').style.display = 'inline';//block return; } if(obj.value=='服装') { document.getElementById('model').style.display = 'inline'; document.getElementById('color').style.display = 'inline'; document.getElementById('serveTheTurnSkin').style.display = 'none';//block }}
[解决办法]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr > <td width="20%" height="30" align="right" >产品系列</td> <td width="20%"> <select name="commodityCategory" onchange='hidden(this.value)' type="text" id="commodityCategory" value="${commodityCategory}" style="width:140px;" verify="NotNull"/> <option value="1">化妆品</option><option value="2">服装</option></select> </tr> <tr id="1"> <td width="20%" height="30" align="right" >适用肤质</td> <td><input style="width:240px;" name="serveTheTurnSkin" type="text" id="serveTheTurnSkin" value="" /> </tr> <tr id="2"> <td width="20%" height="30" align="right" >型号</td> <td><input name="model" type="text" id="model" value=""/> <td width="20%" height="30" align="right" >颜色</td> <td><input name="color" type="text" id="color" value=""/> </tr></table> <script type="text/javascript"> function hidden(value){ if (value==1){ document.getElementById("2").style.display="none"; document.getElementById("1").style.display=""; } else if (value==2){ document.getElementById("1").style.display="none"; document.getElementById("2").style.display=""; } } </script> </body></html>