HTML Forum

**Nick_Knight3** · 03-04-2010, 01:33 AM

I have the need to create a small form with a select box with three choices. Choice 1, choice 2 choice3. Choice 1 shows content in a specified area and hides choice 2,3 , Choice 2 Hides Choice 1

**JeremyMiller** · 03-06-2010, 06:08 AM

This will give you something to ponder.

HTML Code:

<html>
  <head>
    <script type="text/javascript">
      var toggle_div_settings = {'container_type': 'DIV', 'class_name': {'visible':'box_visible', 'hidden':'box_hidden'}};
      function toggleDiv(source, container_name) {
        if (document.getElementById(container_name)) {
          var box_children = document.getElementById(container_name).getElementsByTagName(toggle_div_settings.container_type);
          if (box_children.length > 0) {
            for (var i=0; i<box_children.length; i++) {
              box_children[i].className = toggle_div_settings.class_name.hidden;
            }
          }
          if (document.getElementById(source.options[source.options.selectedIndex].value)) {
            document.getElementById(source.options[source.options.selectedIndex].value).className = toggle_div_settings.class_name.visible;
          }
        }
      }
    </script>
    <style type="text/css">
      .box_visible {
        display:block;
      }
      .box_hidden {
        display:none;
      }
    </style>
  </head>
  <body>
    <select onChange="toggleDiv(this, 'boxes');">
      <option value="div_1">1</div>
      <option value="div_2">2</div>
      <option value="div_3">3</div>
    </select>
    <div id="boxes">
      <div id="div_1" class="box_visible">Box 1</div>
      <div id="div_2" class="box_hidden">Box 2</div>
      <div id="div_3" class="box_hidden">Box 3</div>
    </div>
  </body>
</html>

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!