新手求帮助，刚开始学习，select 里的onchange事件隐藏

chun518521 2012-04-05 04:11:33
<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>

怎么实现选择化妆品的时候隐藏型号和颜色俩个文本，选择服装的时候隐藏适用肌肤文本。
...全文
124 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
土土 2012-04-05
  • 打赏
  • 举报
 回复 




<%@ 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>


直接复制即可使用 已经测试过。。
java_age 2012-04-05
  • 打赏
  • 举报
 回复 


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

  }



}


在select标签上添加 onchange='showOrhIde(this)'
宏Lee 2012-04-05
  • 打赏
  • 举报
 回复
不知道你会不会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的位置
thinkphp根据下拉列表查询
php新手，今天写的页面需要根据下拉列表，有全部和其他选项，刚进页面的时候或者点了查询显示全部，否则按要求显示，一开始用if来写的，感觉重复的地方太多了，就想着有没有改进的办法，然后照着thinkphp的手册重新...
react -> antd （Table 与 Cascader 平级数据转树形实操）
如果你刚开始学习前端或者 React，将 UI 框架作为你的第一步可能不是最好的主意。 (这是引用antd官网的一句话)，虽然说一开始用antd作为UI框架对新手来说并不是很好，但是如果工作需要呢，那就不得不这样做了。 下面...
django + jquery 实现二级联动
我是一个django新手，想写一个省市的二级联动，...参考博客http://sarlmolapple.is-programmer.com/posts/25844.html文中部分代码为该博客中复制第一步：创建project和app这里就不写了，相信只要是刚开始接触djang...
java中10大常见异常
NO.1 Java.alng.NullPointerException  这个异常大家肯定都经常遇到，异常的解释是 “程序遇上了空指针...对数组操作中出现空指针，很多情况下是一些刚开始学习编程的朋友常犯的错误，即把数组的初始化和数组元素的
Java常见异常
NO.1 Java.alng.NullPointerException 这个异常大家肯定都经常遇到，异常的解释是 “程序遇上了...对数组操作中出现空指针，很多情况下是一些刚开始学习编程的朋友常犯的错误，即把数组的初始化和数组元素的初始化混...
Web 开发

81,092

社区成员

341,717

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章