根据下拉列表框的值在当前页面显示不同的内容

最新推荐文章于 2022-07-13 17:53:30 发布

tianzhen620

最新推荐文章于 2022-07-13 17:53:30 发布

阅读量1.4w

点赞数 1

文章标签： js 下拉列表框输出不同内容

本文链接：https://blog.csdn.net/tianzhen620/article/details/79934338

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var str2 = 0;
/*1、定义复选框函数*/
function test(can) {
str2 = can;
}
/*2、书写查询按钮函数*/
function caxun() {
document.getElementById("a").style.display = 'none';
document.getElementById("b").style.display = 'none';
document.getElementById("c").style.display = 'none';
document.getElementById("d").style.display = 'none';
document.getElementById("e").style.display = 'none';
if (str2 == 1) {
document.getElementById("a").style.display = 'block';
} else if (str2 == 2) {
document.getElementById("b").style.display = 'block';
} else if (str2 == 3) {
document.getElementById("c").style.display = 'block';
} else if (str2 == 4) {
document.getElementById("d").style.display = 'block';
} else {
document.getElementById("e").style.display = 'block';
}
}
</script>
</head>
<body>
<input type="button" value="查询" οnclick="caxun()" style="font-size: x-large;font-family: '仿宋';" />
<table>
<select οnchange="test(this.value)">
<option value="1" >一</option>
<option value="2" >二</option>
<option value="3" >三</option>
<option value="4" >四</option>
<option value="5" >五</option>
</table>
<div id="a" style="display:none">一</div>
<div id="b" style="display:none">二</div>
<div id="c" style="display:none">三</div>
<div id="d" style="display:none">四</div>
<div id="e" style="display:none">五</div>
</body>
</html>

tianzhen620

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
根据下拉列表框的值在当前页面显示不同的内容

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; var str2 = 0; /*1、定义复选框函数*/ function test(can) { str2 = can
复制链接

扫一扫