首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > JAVA > Java Web开发 >

新手求帮助,刚开始学习,select 里的onchange事件隐藏,该怎么解决

2012-04-08 
新手求帮助,刚开始学习,select 里的onchange事件隐藏table width100% border0 cellpadding0 cel

新手求帮助,刚开始学习,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的位置
[解决办法]

JScript code
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  }}
[解决办法]
Java code
<%@ 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> 

热点排行