• JS,如果改变span标签的是否隐藏属性


    测试:

    test.html

    代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript" src="js/Menu.js"></SCRIPT>
     </HEAD>
    
     <BODY>
      <table>
    	<tr>
    		<td>
    			<form method="post" action="#">
    			查询类型<select id="selectType" name="selectType" onchange="isChang1(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>
     </BODY>
    </HTML>
     

    ----------------------------------Hongten--------------------------------------------

    js/Menu.js

    代码:

    //这是用了自定义的方法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="";
    	}
    }
    

    ----------------------------------Hongten--------------------------------------------

    测试结果:

    其默认选择是:按院系

    这是如果我们选择的是:不按院系,即按:职工号或姓名,那么,

    这时就会隐藏:

    <span id="yxsh" style=display:none>...</span>

    并且<span id="key" style=display:>...</span>

    如果我们是选择:按院系,即默认情况下

    那么,结果是:
    <span id="yxsh" style=display:>...</span>

    并且<span id="key" style=display:none>...</span>

    ----------------------------------Hongten--------------------------------------------

  • 相关阅读:
    NET Core 2.2
    NET Core项目模板
    Eclipse同时显示多个控制台项目的输出
    Java中的序列化
    Java中的泛型
    Java中的集合
    Java中的数据结构
    Java中的包
    Java中的接口
    Java中的封装
  • 原文地址:https://www.cnblogs.com/hongten/p/2199431.html
Copyright © 2020-2023  润新知