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

最新推荐文章于 2025-08-05 14:59:35 发布

转载最新推荐文章于 2025-08-05 14:59:35 发布 · 1.1w 阅读

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种利用JavaScript的setAttribute方法，根据Select控件的选择结果动态显示或隐藏不同Div元素的方法。具体实现中，根据所选城市名称切换显示广州、南昌或沈阳对应的Div，并更新文本框内容。

在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>  