新手求帮助，刚开始学习，select 里的onchange事件隐藏,该怎么解决
日期：2014-05-17 浏览次数：20712 次
新手求帮助，刚开始学习，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>
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
