JS 如何改变span标签的是否隐藏属性

最新推荐文章于 2021-12-27 08:18:59 发布

那一年丶天空很高丶风很清澈

最新推荐文章于 2021-12-27 08:18:59 发布

阅读量1.3w

点赞数

分类专栏：学习总结

学习总结专栏收录该内容

17 篇文章 0 订阅

订阅专栏

转载的代码

效果展示
这里写图片描述

<BODY>

    <form method="post" action="#">
        查询类型<select id="selectType" name="selectType"
            onchange="isChang(this.value)">
            <option value="yxsh">按院系</option>
            <option value="zgh">职工号</option>
            <option value="xm">姓名</option>
        </select> 

        <span id="yxsh" style=display:>院系 
            <select id="depart" name="depart">
                <option value="all">所有院系</option>
                <option value="123">123</option>
                <option value="123">123</option>
                <option value="123">123</option>
                <option value="123">123</option>
                <option value="123">123</option>
            </select> 
            课程分配 
            <select id="isAll" name="isAll">
                <option value="all">所有</option>
                <option value="NO">未分配</option>
                <option value="YES">已分配</option>
        </select>
        </span> 
        <span id="key" style="display: none"> <input type="text" name="keyword" id="keyword" />
        </span> 
        <input type="submit" value="查询" />
    </form>

    <script type="text/javascript">
        //这是用了自定义的方法hideElement()和shwoElement() 
        function isChang(values) {
            if (values == "yxsh") {
                hideElement("key");
                showElement("yxsh");
            } else {
                hideElement("yxsh");
                showElement("key");
            }
        }
        //自定义方法hideElement() 
        function hideElement(id) {
            document.getElementById(id).style.display = "none";
        }
        //自定义方法showElement() 
        function showElement(id) {
            document.getElementById(id).style.display = "";
        }
        //这是不用自定义函数直接设置是否隐藏 
        function isChang1(values) {
            if (values == "yxsh") {
                document.getElementById("yxsh").style.display = "";
                document.getElementById("key").style.display = "none";
            } else {
                document.getElementById("yxsh").style.display = "none";
                document.getElementById("key").style.display = "";
            }
        }
    </script>
</BODY>
</HTML>