Home > Developer > JavaScript
Test:
Test.html
Code:
Copy codeThe 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"> unallocated </option>
<Option value = "YES"> allocated </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 codeThe Code is as follows:
// The custom methods hideElement () and shwoElement () are used ()
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 = "";
}
// You do not need to set whether to hide 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 choice is: by department
If we choose not to follow the department, that is, the employee ID or name, then,
This will hide:
<Span id = "yxsh" style = display: none>... </span>
And <span id = "key" style = display:>... </span>
If we select: by department, that is, by default
The result is:
<Span id = "yxsh" style = display:>... </span>
And <span id = "key" style = display: none>... </span>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
