Home|Sitemap|Contact

How can you show hidden fields if a particular value is selected from a drop down list while hiding other text fields?


Select value 2


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<title>show hidden select and hide text fields on selection</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<script type="text/javascript">
<!--
function s1change(val) {
  if (val==2) {
    document.getElementById('hiddenSelect').style.display='block';
    document.getElementById('visibleFields').style.display='none';
  } else {
    document.getElementById('hiddenSelect').style.display='none';
    document.getElementById('visibleFields').style.display='block';
  }
}
//-->
</script>
<style>
<!--
#hiddenSelect {
    display:none;
}
#visibleFields {
    display:block;
} 
-->
</style>
</head>

<body>
<select size="1" name="select1" onchange="s1change(this[this.selectedIndex].value);">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<div id="hiddenSelect">
  <select size="1" name="select2">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
</div>
<div id="visibleFields">
  <input type="text" name="t1" size="20">
  &nbsp;<input type="text" name="t2" size="20">
</div>
</div>
</body>

</html>