如何使用js动态显示或隐藏DIV

来源：互联网发布：管家婆软件怎么删除编辑：程序博客网时间：2024/05/06 21:42

在web页面中，经常需要使用select控件来显示div的显示与隐藏，实现这个方法主要用到了setAttribute方法，以下为示例代码

[html] view plain copy
<html>  
<title>通过选择项显示不同的结果</title>  
<head>  
<script type="text/JavaScript">  
function showdiv()  
{  
    var doc=document;  
    var citytext=doc.getElementById("city").value;  
    var div1=doc.getElementById("div1");  
    var div2=doc.getElementById("div2");  
    var div3=doc.getElementById("div3");  
    switch (citytext)  
    {  
        case "广州":            
            div1.setAttribute("style","display");             
            div2.setAttribute("style","display:none");  
            div3.setAttribute("style","display:none");  
            doc.getElementById("text1").value=citytext;  
            break;  
        case "南昌":  
            div1.setAttribute("style","display:none");  
            div2.setAttribute("style","display");  
            div3.setAttribute("style","display:none");  
            doc.getElementById("text2").value=citytext;  
            break;  
        case "沈阳":  
            div1.setAttribute("style","display:none");  
            div2.setAttribute("style","display:none");  
            div3.setAttribute("style","display");  
            doc.getElementById("text3").value=citytext;  
            break;  
    }  
}  
</script>  
</head>  
<body>  
<select title="城市" id="city" onchange="showdiv()">  
<option selected value="广州">广州</option>  
<option value="南昌">南昌</option>  
<option value="沈阳">沈阳</option>  
</select>  
<div  id="div1" style="display:none"  >您选择了广东的省会<input type="text" id="text1" value=""/></div>  
<div  id="div2" style="display:none"  >您选择了江西的省会<input type="text" id="text2" value=""/></div>  
<div  id="div3" style="display:none"  >您选择了辽宁的省会<input type="text" id="text3" value=""/></div>  
</body>  
</html>  

阅读全文

0 0