您的位置：首页 > Web前端 > JavaScript

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

2017-12-20 16:55 661 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航