www.webdeveloper.com
Results 1 to 4 of 4

Thread: Show/Hide divs based on checkboxes

  1. #1
    Join Date
    Apr 2013
    Posts
    3

    Show/Hide divs based on checkboxes

    Hi all, looking for some clues please.

    The following code works with one call to the function.
    I want to repeat the same technique a second time on the same page.

    I have commented out a second usage script and html.
    Each works by them self, but one breaks when both are uncommented.
    The first one lists both divs when first opened, and then works onchange.

    Any solution would be much appreciated.


    <html>
    <head>

    <script type="text/javascript">
    function showListA(selectObj)
    {
    var listsA = new Array('cars', 'computers');
    var selectedListIDA = selectObj.options[selectObj.selectedIndex].value;
    var divObjA;

    for(A=0; A<listsA.length; A++)
    {
    divObjA = document.getElementById(listsA[A]);
    divObjA.style.display = (selectedListIDA==listsA[A]) ? '' : 'none';
    }
    return;
    }

    window.onload = function()
    {
    showListA(document.getElementById('listTypeA'));
    return;
    }
    </script>


    <!--
    <script type="text/javascript">
    function showListB(selectObj)
    {
    var listsB = new Array('colors', 'sports');
    var selectedListIDB = selectObj.options[selectObj.selectedIndex].value;
    var divObjB;

    for(B=0; B<listsB.length; B++)
    {
    divObjB = document.getElementById(listsB[B]);
    divObjB.style.display = (selectedListIDB==listsB[B]) ? '' : 'none';
    }
    return;
    }

    window.onload = function()
    {
    showListB(document.getElementById('listTypeB'));
    return;
    }
    </script>
    -->


    </head>
    <body>

    <select name="listTypeA" id="listTypeA" onchange="showListA(this);">
    <option value="cars">Cars</option>
    <option value="computers">Computers</option>

    </select>
    <br />

    <div id="cars">
    <input type="checkbox" name="cars[]" value="Honda"> Honda<br />
    <input type="checkbox" name="cars[]" value="Ford"> Ford<br />
    <input type="checkbox" name="cars[]" value="Toyota"> Toyota<br />
    </div>

    <div id="computers">
    <input type="checkbox" name="computers[]" value="Dell"> Dell<br />
    <input type="checkbox" name="computers[]" value="HP"> HP<br />
    <input type="checkbox" name="computers[]" value="Alienware"> Alienware<br />
    </div>

    <br /><br />

    <!--
    <select name="listTypeB" id="listTypeB" onchange="showListB(this);">
    <option value="colors">Colors</option>
    <option value="sports">Sports</option>
    </select>
    <br />

    <div id="colors">
    <input type="checkbox" name="colors[]" value="Yellow"> Yellow<br />
    <input type="checkbox" name="colors[]" value="Green"> Green<br />
    <input type="checkbox" name="colors[]" value="Blue"> Blue<br />
    </div>

    <div id="sports">
    <input type="checkbox" name="sports[]" value="Football"> Football<br />
    <input type="checkbox" name="sports[]" value="Baseball"> Baseball<br />
    <input type="checkbox" name="sports[]" value="Hockey"> Hockey<br />
    </div>
    -->


    </body>
    </html>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb

    See if you can modify the following to meet your needs.
    Added some CSS just to pretty it up a bit.
    Post back if you have questions about the set-up.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Dual Dropdowns </title>
    
    <style type="text/css">
     #cars, #computers, #colors, #sports { display:none; }
     ul { list-style-type:none; }
     li { float:left; width:125px; }
    </style>
    
    </head>
    <body>
    
    <ul>
    <li>
    <select id="listTypeA" onchange="showList(this)">
     <option value="cars,computers"></option>
     <option value="cars,computers">Cars</option>
     <option value="computers,cars">Computers</option>
    </select>
    <br>
    <div id="cars" style="display:none">
     <b>Cars</b><br>
     <input type="checkbox" value="Honda"> Honda <br />
     <input type="checkbox" value="Ford"> Ford <br />
     <input type="checkbox" value="Toyota"> Toyota <br />
    </div>
    <div id="computers" style="display:none">
     <b>Computers</b><br>
     <input type="checkbox" value="Dell"> Dell <br />
     <input type="checkbox" value="HP"> HP <br />
     <input type="checkbox" value="Alienware"> Alienware <br />
    </div>
    </li>
    
    <li>
    <select id="listTypeB" onchange="showList(this)">
     <option value="colors,sports,breads"></option>
     <option value="colors,sports,breads">Colors</option>
     <option value="sports,colors,breads">Sports</option>
     <option value="breads,sports,colors">Breads</option>
    </select>
    <br>
    <div id="colors" style="display:none">
     <b>Colors</b><br>
     <input type="checkbox" value="Yellow"> Yellow <br />
     <input type="checkbox" value="Green"> Green <br />
     <input type="checkbox" value="Blue"> Blue <br />
    </div>
    <div id="sports" style="display:none">
     <b>Sports</b><br>
     <input type="checkbox" value="Football"> Football <br />
     <input type="checkbox" value="Baseball"> Baseball <br />
     <input type="checkbox" value="Basketball"> Basketball <br />
     <input type="checkbox" value="Rugby"> Rugby <br />
     <input type="checkbox" value="Track &amp; Field"> Track &amp; Field <br />
     <input type="checkbox" value="Hockey"> Hockey <br />
     <input type="checkbox" value="Softball"> Softball <br />
    </div>
    <div id="breads" style="display:none">
     <b>Breads</b><br>
     <input type="checkbox" value="White"> White <br />
     <input type="checkbox" value="Rye"> Rye <br />
     <input type="checkbox" value="Marble"> Marble <br />
     <input type="checkbox" value="Sourdough"> Sourdough <br />
    </div>
    </li>
    <br style="clear:both">
    
    <script type="text/javascript">
    function showList(info) {
      var ids = info.value;
      var tarr = ids.split(',');
      if (info.selectedIndex == 0) {
        for (var i=0; i<tarr.length; i++) { document.getElementById(tarr[i]).style.display = 'none'; }
      } else {
        document.getElementById(tarr[0]).style.display = 'block';
        for (var i=1; i<tarr.length; i++) { document.getElementById(tarr[i]).style.display = 'none'; }
      }
    }
    </script>
    </body>
    </html>
    I added an extra list (breads) to show unequal size lists would display correctly. All your lists were 3 in length.

  3. #3
    Join Date
    Apr 2013
    Posts
    3
    JMRKER

    Thank you, that seems to work well...

    I will study the code after work so I can learn something from it.

    Much appreciated.

  4. #4
    Join Date
    Apr 2013
    Posts
    3
    JMRKER

    Thank you, that seems to work well...

    I will study the code after work so I can learn something from it.

    Much appreciated.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles