Question

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显示，其他层隐藏；
如何实现？

Answer 1

//我这里假设你的s2是在div3层里面的，你自己改改
<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>

Answer 2

主要是应用css的z-index来控制，通过改变层的z-index的值大小来让层成为当前获得焦点。而如果是要隐藏，则改变层的display就行了。