JS How to change the hidden attribute of span tag_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JS How to change the hidden attribute of span tag_javascript skills

May 16, 2016 pm 06:01 PM

span Hidden properties

Test:
test.html
Code:

Copy code The code is as follows:

 
<!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="#"> 
Query type<select id="selectType" name ="selectType" onchange="isChang1(this.value)"> 
<option value="yxsh">By department</option> 
<option value="zgh"> Employee ID</option> 
<option value="xm">Name</option> 
</select> 
<span id="yxsh" style=display:> ;Department
<select id="depart" name="depart"> 
<option value="all">All departments</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> 
Course Assignment
< select id="isAll" name="isAll"> 
<option value="all">All</option> 
<option value="NO">Not assigned</ option> 
<option value="YES">Assigned</option> 
</select> 
</span> 
<span id="key" style =display:none> 
<input type="text" name="keyword" id="keyword"/> 
</span> 
<input type="submit" value= "Query"/> 
</form> 
</BODY> 
</HTML> 

 

js/Menu.js
Code:

Copy code The code is as follows:

//This is using the custom method hideElement() and shwoElement() 
function isChang(values) 
{ 
if(values=="yxsh"){ 
hideElement("key"); 
showElement("yxsh"); 
}else{ 
hideElement("yxsh"); 
showElement("key"); 
} 
} 
//Custom method hideElement() 
function hideElement( id){ 
document.getElementById(id).style.display="none"; 
} 
//Custom method showElement() 
function showElement(id){ 
document. getElementById(id).style.display=""; 
} 
//This is to directly set whether to hide or not without a custom function 
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=""; 
} 
} 

 

Test results:
The default selection is: by department
This is if we choose: not by department, that is, by: employee number or name, then,
It will be hidden at this time:
...
and. ..
If we choose: by department, that is, by default
Then the result is:
.. .
and...

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn