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

转载的代码

效果展示
这里写图片描述
这里写图片描述
这里写图片描述

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

猜你喜欢

转载自blog.csdn.net/gentlu/article/details/54632626