#1
  1. Contributing User
    ASP Discoverer (100 - 499 posts)

    Join Date
    Aug 2003
    Posts
    183
    Rep Power
    11

    Question displaying checkbox based on option selected in dropdown?


    Hi was just wondering.. how do you hide/show a checkbox based on what has been selected in the dropdown box

    For example, only if the option "apple" is selected will the checkbox show up, else it'll just be hidden away as long as the option "apple" is not selected?

    Could any one pls guide me or lead me to some tutorials? thanks
  2. #2
  3. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Oct 2005
    Location
    California
    Posts
    16
    Rep Power
    0

    Lightbulb Solution to question


    Here is one solution to your question:

    Code:
    <html>
    <head>
    <script type="text/javascript">
       function changeCheckboxState(dropDownList) {
          // If the user selects the third option
          // in the dropdown box make the checkbox visible
          if(dropDownList.selectedIndex == 2) {
             document.getElementById("testCheckbox").style.visibility = "visible";
          }
          else {
             document.getElementById("testCheckbox").style.visibility = "hidden";
          }
       }
    </script>
    
    </head>
    
    <body>
    <select name="testDropdown" onChange="javascript:changeCheckboxState(this);">
       <option name="test1" value="test1">test1</option>
       <option name="test2" value="test2">test2</option>
       <option name="test3" value="test3">test3</option>
    </select>
    
    <div id="testCheckbox" style="visibility: hidden;">
       <input type="checkbox" name="testCheckBox" value="testCheckBox1" /> Test Checkbox
    </div>
    
    </body>
    
    </html>
    Your pretty much just going to be testing to see which option the user selected in the dropdown box and then hiding the container containing the checkbox and the label for the checkbox (or you could just hide the checkbox itself) using a little bit of css manipulation. You have two choices for hiding elements in the browser using css. One is display and the other is visibility. The difference is that visibility preserves whitespace while display does not. Hope this helps.
  4. #3
  5. Contributing User
    ASP Discoverer (100 - 499 posts)

    Join Date
    Aug 2003
    Posts
    183
    Rep Power
    11

    incorporating it into a chain select


    hi thanks it helped understand better but now.. i need to use chained selects... found this script at http://www.dynamicdrive.com/dynamici...menu/index.htm

    how do i incorporate that into the page.. like if the "apple" option in the first dropdown is selected show the checkbox... lol sorry javascripting not that good
    as the code is
    Code:
    <td><select name="firstlevel" style="width:180px;" onchange="javascript:changeCheckboxState(this);"></select></td>
    <td><select name="secondlevel" style="width:160px;"></select></td>
    <td><select name="thirdlevel" style="width:160px;"></select></td>
    the so called values are in javascript modified it a little
    Code:
    addOption("First-Select", "Select an item", "", 1); //HEADER OPTION
    addList("First-Select", "Pink", "Pink", "Pink");
    addList("First-Select", "Apple", "Apple", "Apple");
    
    addOption("Pink", "Select an item", "", 1); //HEADER OPTION
    addList("Pink", "PinkyLinks", "PinkyLinks", "PinkyLinks");
    addList("Pink", "Pink2", "PinkyLinks", "PinkyLinks");
    //END OF THIS NODE
    
    addOption("Apple", "Select an item", "", 1); //HEADER OPTION
    addOption("Apple", "Apple Kit", "AppleKit");
    addOption("Apple", "Apple Drive", "AppleDrive",
    i tried to add another function in the chaninedmenu.js
    Code:
    function changeCheckboxState(selectedOptionvalue) 
    {
    	for (i=arguments.length-1;i>=0; i--)
    	{
    	if (arguments[i].selectedIndex!=-1)
    	 {
    	var selectedOptionvalue=arguments[i].options[arguments[i].selectedIndex].value
    
          // If the user selects the third option
          // in the dropdown box make the checkbox visible
          if(selectedOptionvalue == "Apple") 
    	  {
             document.getElementById("testCheckbox").style.visibility = "visible";
          }
          else 
    	  {
             document.getElementById("testCheckbox").style.visibility = "hidden";
          }
       }
    	}
    }
    but i'll just get an error.. as in nothing happens i think its got something to do with this line?
    Code:
    document.getElementById("testCheckbox").style.visibility = "visible";
    Last edited by icepricessa; October 13th, 2005 at 02:17 AM.
  6. #4
  7. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Oct 2005
    Location
    California
    Posts
    16
    Rep Power
    0

    A few suggestions


    Not real sure what your trying to accomplish here or how but here are a few suggestions:
    1. Did you remember to include the chainedselects.js file before you started calling the functions addOption, addList, etc...? You said that nothing happens, this could be the reason why.
    Example:
    Code:
    <script type="text/javascript" src="chainedselects.js">
    </script>
    2. Where is your checkbox? Did you change the ID?

    Code:
    document.getElementById("[ID of checkbox or DIV containing checkbox]").style.visibility = "visible";
    3. Do you want the checkbox visible based on what the user clicks on in the first dropdown list or based on what they click on across all 3 of the dropdowns (logical OR)? Is there only one checkbox or multiple checkboxes you want displayed/hidden?

    4. Last suggestion is to just read over the documentation real good and make sure you'r not missing any files.

Similar Threads

  1. Select Option Group option based on Checkbox value
    By cmhnz in forum Microsoft Access Help
    Replies: 2
    Last Post: August 23rd, 2005, 06:35 AM
  2. searching an access database based on a selected checkbox
    By kaztrokiller in forum ASP Development
    Replies: 2
    Last Post: January 31st, 2005, 11:03 PM
  3. Replies: 2
    Last Post: November 12th, 2004, 04:57 AM
  4. Replies: 2
    Last Post: September 24th, 2004, 01:18 PM
  5. Replies: 1
    Last Post: August 25th, 2004, 05:04 AM

IMN logo majestic logo threadwatch logo seochat tools logo