js控制显示

最新推荐文章于 2022-12-24 09:38:46 发布

iteye_2184

最新推荐文章于 2022-12-24 09:38:46 发布

阅读量105

点赞数

分类专栏： js 文章标签： XHTML JSP J# HTML

本文链接：https://blog.csdn.net/iteye_2184/article/details/82030600

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1 第一种：

<!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=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
function showv()
{
var tr1=document.getElementById("tr1");
tr1.style.display="";
var sobj=document.getElementById("sv");
alert(sobj.value);
var optionsv="";
for(k=0;k<sobj.options.length;k++)
{
optionsv=optionsv+","+sobj[k].value;
}
alert(optionsv);
}
</script>
<body>
<table width="200" border="1" align="center">
<tr>
<td><input type="button" οnclick="showv()" value="列表的值给我出来"/></td>
</tr>
<tr id="tr1" style="display:none">
<td>
<select name="sv" id="sv">
<option value="A">111</option>
<option value="B">222</option>
<option value="C">333</option>
</select>
</td>
</tr>
</table>
</body>
</html>

2 第二种：

<!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=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
function showv()
{
var tr1=document.getElementById("tr1");
tr1.style.display="";
var sobj=document.getElementById("sv").value;
alert("你选择的是："+sobj);
}
</script>
<body>
<table width="200" border="1" align="center">
<tr>
<td><input type="button" οnclick="showv()" value="列表的值给我出来"/></td>
</tr>
<tr id="tr1" style="display:none">
<td>
<select name="sv" id="sv">
<option value="A">111</option>
<option value="B" selected="selected">222</option>
<option value="C">333</option>
</select>
</td>
</tr>
</table>
</body>
</html>
3 第三种：

<tr id="orgattr" style="">
<td align="center"><span class="style2">属性</span></td>
<td >
<select name="orgattribute" οnchange="oldsubdeptcodeshowcotrol()">
<option value="J">aaa</option>
<option value="Y">bbb</option> </select>
</td>
<td align="center" id="old1"><span class="style2">名称</span></td>
<td id="old2">
<input type="text" name="oldsubdeptcode" maxlength="5" οnpaste="return false"
οnkeypress="return (event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=65&&event.keyCode<=90)||(event.keyCode>=97&&event.keyCode<=122)"
style="ime-mode:disabled"
/>
</td>
</tr>

---名称输入框只允许输入字母和数字。

只有当属性为J时，名称输入框才显示。

js控制：

function oldsubdeptcodeshowcotrol(){
var selectType=document.getElementById("orgattribute").value;
var old1=document.getElementById("old1");
var old2=document.getElementById("old2");
if(selectType=="J"){
old1.style.display="";
old2.style.display="";
}else{
old1.style.display="none";
old2.style.display="none";
}

}

function setInput()
{
var selectType=document.all.orgtype.value;
var orgattribute=document.getElementById("orgattr");
//alert(selectType);
if(selectType=="4")
{
orgattribute.style.display="";
}
else
{
orgattribute.style.display="none";
}
}

setinput方法在jsp加载和前面一个列表的onchange事件时调用。