select控制层的隐藏和显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了select控制层的隐藏和显示相关的知识，希望对你有一定的参考价值。
首先有一个select id="s1" 下拉列为：“你好”，“不好”，“好吗”。
select id="s2"，s2的下拉列为“好”，“还好”，“一般”
下面有5个层
当s1的值是“你好”时，
div1显示，div2隐藏，div3（s2）隐藏，div4隐藏，div5隐藏；
当s1的值是“不好”时，
div2显示，div1隐藏，div3（s2）隐藏，div4隐藏，div5隐藏；
当s1的值是“好吗”时，
div3（s2）显示。
当div3（s2）的值是“好”时，div4显示，其他层隐藏；
当div3（s2）的值是“还好”时，div5显示，其他层隐藏；
当div3（s2）的值是“一般”时，div4，div5显示，其他层隐藏；
如何实现？
<script language="javascript">
function s1change(s1)
alert(s1.value);
if(s1.value=="你好")
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
document.getElementById("div3").style.display = 'none';
document.getElementById("div4").style.display = 'none';
document.getElementById("div5").style.display = 'none';
else if(s1.value=="不好")
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
document.getElementById("div3").style.display = 'none';
document.getElementById("div4").style.display = 'none';
document.getElementById("div5").style.display = 'none';
else
document.getElementById("div3").style.display = 'block';
document.getElementById("div1").style.display = 'none';
document.getElementById("div2").style.display = 'none';
document.getElementById("div4").style.display = 'none';
document.getElementById("div5").style.display = 'none';
s2change(document.getElementById("s2"));
function s2change(s2)
if(s2.value=="好")
document.getElementById("div4").style.display = 'block';
document.getElementById("div1").style.display = 'none';
document.getElementById("div2").style.display = 'none';
document.getElementById("div5").style.display = 'none';
else if(s2.value=="还好")
document.getElementById("div5").style.display = 'block';
document.getElementById("div1").style.display = 'none';
document.getElementById("div2").style.display = 'none';
document.getElementById("div4").style.display = 'none';
else
document.getElementById("div1").style.display = 'none';
document.getElementById("div2").style.display = 'none';
document.getElementById("div4").style.display = 'block';
document.getElementById("div5").style.display = 'block';
window.onload=s1change(document.getElementById("s1"));
</script>
<select id="s1" onchange="s1change(this);">
<option value="你好">你好</option>
<option value="不好">不好</option>
<option value="好吗">好码</option>
</select>
<div id="div1" style="display:block">
div1
</div>
<div id="div2" style="display:none">
div2
</div>
<div id="div3" style="display:none">
<select id="s2" onchange="s2change(this);">
<option value="好">好</option>
<option value="还好">还好</option>
<option value="一般">一般</option>
</select>
</div>
<div id="div4" style="display:none">
div4
</div>
<div id="div5" style="display:none">
div5
</div> 参考技术A 主要是应用css的z-index来控制，通过改变层的z-index的值大小来让层成为当前获得焦点。而如果是要隐藏，则改变层的display就行了。
DIV层显示隐藏
在页面里放了 8个DIV层 第一个打开网页就显示了，其他隐藏了用的是 display=“none”；
有弄了两个按钮 ，一个是点击的功能是 将第一个隐藏，显示第二个，再那该按钮隐藏第二个
显示第三个，以此类推。
第二个按钮就是返回，比如：到最后一个DIV层 返回，就显示第7 个隐藏第8 个DIV
大至就是这个点击事件 如何实现啊 ？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#cc
height:200px;
width:300px;
overflow:hidden;
#cc div
font-size:72px;
text-align:center;
line-height:200px;
width:300px;
height:200px;
background-color:#FFC;
</style>
</head>
<body>
<div id="cc">
<div>1</div>
<div style="display:none">2</div>
<div style="display:none">3</div>
<div style="display:none">4</div>
<div style="display:none">5</div>
<div style="display:none">6</div>
<div style="display:none">7</div>
<div style="display:none">8</div>
</div>
<script language="javascript" type="text/javascript" >
var N=0;
function nextDIV()
document.getElementById("cc").getElementsByTagName("div").item(N).style.display="none";
if(N==7) N=0;
else N++;
document.getElementById("cc").getElementsByTagName("div").item(N).style.display="block";
function previousDIV()
document.getElementById("cc").getElementsByTagName("div").item(N).style.display="none";
if(N==0) N=7;
else N--;
document.getElementById("cc").getElementsByTagName("div").item(N).style.display="block";
</script>
<input type="button" onclick="nextDIV()" value="next" />
<input type="button" onclick="previousDIV()" value="previous" />
</body> 参考技术B 还要设置Z-index属性！！！追问
什么意思，怎么做？
以上是关于select控制层的隐藏和显示的主要内容，如果未能解决你的问题，请参考以下文章
.net页面上有三个RadioButton（服务器控件），控制下面三个层的隐藏和显示，也就是选中一个隐藏另外两个