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

<!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="查询" onclick="caxun()" style="font-size: x-large;font-family: '仿宋';" />
<table>
<select onchange="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>

猜你喜欢

转载自blog.csdn.net/tianzhen620/article/details/79934338