javascript实现select选项带动div层隐藏和显示
<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>
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>
posted @
标签:技术文章
2021-04-30
返回首页
订阅 RSS / Feed 