how to make select dropdown with HIDE SHOW CSS

sam, I would have implemented your code a little differently.  I would have called the first div "test1" (therefore changing the first <option>'s value to "test1".

That way the javascript for loop would be:
for (var i=1; i<6; i++)
  document.getElementById("test"+i).style.display = "none";

This specifies just those 5 "test" divisions get hidden before one gets shown.  If you had other divisions on your page, say <div id="header">, <div id="footer">, <div id="nav">, then your code would need a slight change because your's uses getElementsByTagName("div") which would therefore include those divisions.  Mine specifically specifies those divisions.

The advantage that your's has over mine is that your's does not need to know the specific amount of divisions.  Mine has hardcoded (although you can work around this).  Yours includes all the divisions and so no hard coded number is given.

I am not too familer with DOM code, (I get by with hacking up scripts and learning as I go).  What would be your solution to test to see if the division that you have has an id with test.  Would your code be like this?:

var e = document.getElementsByTagName("div");
var regex = /^test/i;
for (var i=0; i<e.length; i++)
{
  if (regex.test(e[i].id))
    e[i].style.display = "none";
}

I think that looks right, it checks the if the id starts with the word "test", if so then it hides that division.

What do you think?
Joe P




Joe P

Yup this small addition does identify only "test" divisions.

<script type="text/javascript"><!--
function display(theId) {
  var e = document.getElementsByTagName("div");
  for (var i=0; i<e.length; i++)
    if (/^test/i.test(e[i].id))
      e[i].style.display = "none";
  document.getElementById(theId).style.display = "block"; // Show the element
}
//--></script>

<div id="header"><h1>Head</h1></div>
<select onchange="display(this.value);">
  <option value="test">Test</option>
  <option value="test2">Test2</option>
  <option value="test3">Test3</option>
  <option value="test4">Test3</option>
  <option value="test5">Test3</option>
</select>
<div id="test" style="display:none;">test</div>
<div id="test2" style="display:none;">test2</div>
<div id="test3" style="display:none;">test3</div>
<div id="test4" style="display:none;">test4</div>
<div id="test5" style="display:none;">test5</div>


Notice now that the <div id="header"> is never hidden even though it is in the e[] array because it's tag name is <div>.
Thanks for the lesson sam2912.  Helped me learn some really dynamic code!  So thanks =-)
Joe P

I would have done that regex thing, but didn't want to confuse the original question.

Excellent.  I'm learning along with aot2002. =)

Thanks,
Joe P