How to hide a select tag?
Question
I have this simple form:
<form method="post" action="index.php" >
<table>
<tr>
<td>
Sex:
</td>
<td>
<select name="sex" >
<option value="e">Select </option>
<option value="girl">Girl </option>
<option value="boy">Boy </option>
</select>
</td>
</tr>
<tr>
<td>
Accessories:
</td>
<td>
<select name="earrings" >
<option value="e">Select </option>
<option value="gold">gold </option>
<option value="silver">silver </option>
</select>
</td>
</tr>
</table>
<br>
<input type="submit" size="10" value="Go" name="go">
</form>
and I want that when I click on "boy" in the first select then this block have to dissapears:
<tr>
<td>
Accessories:
</td>
<td>
<select name="earrings" >
<option value="e">Select </option>
<option value="gold">gold </option>
<option value="silver">silver </option>
</select>
</td>
</tr>
I can do this with CSS? If not, I can do this with javascript?
4 answers
solution1
18 ACCPTED 2010-12-12 18:21:55
You can't do this in CSS, but you can in JavaScript
function hide(){
var earrings = document.getElementById('earringstd');
earrings.style.visibility = 'hidden';
}
function show(){
var earrings = document.getElementById('earringstd');
earrings.style.visibility = 'visible';
}
Just make sure that your td has id=earringstd
Then create function:
function genderSelectHandler(select){
if(select.value == 'girl'){
show();
}else if(select.value == 'boy'){
hide();
}}
Now all you have to is change your gender select tag to:
<select name="sex" onchange="genderSelectHandler(this)">
solution2
3 2014-02-18 15:10:37
The hidden property hides the select but the tag is still rendered, and takes up space on the page.
If you want to hide a select and not want it to appear at all, but still be able to interact with the DOM, here's some sample code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function hide(){
var elem = document.getElementById('sel1');
elem.style.display = 'none';
}
function show(){
var elem = document.getElementById('sel1');
elem.style.display = 'inline';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<select id='sel1' style='display:inline;'/>
<input type="button" onclick="show();" value="Show"></input><br>
<input type="button" onclick="hide();" value="Hide"></input><br>
</form>
</body>
</html>
solution3
1 2014-11-14 18:25:34
I know this is an old but I altered Goran code as listed below and thought I would share. This collapses the code so that it doesn't retain it's space on the page, whereas the code listed above holds continues to hold it's form but becomes invisible.
function genderSelectHandler(select){
if(select.value == 'girl'){
$("#earringstd").show()
}else{
$("#earringstd").hide();
}}
<select name="sex" onchange="genderSelectHandler(this)">
solution4
0 2022-12-07 17:00:13
This can now be done using just CSS in browsers that support the :has operator.
tr:has(select[name="sex"] option:checked:not([value="girl"])) + tr {
display: none;
}
This selector in the code above finds any <tr> with a <select name="sex"> descendant, where the option currently selected isn't girl, and hides the adjacent <tr> .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.