SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show a div when a certain option is chosen in a SELECT box

    I have a select box that has around 50 options. I would like to display some additional fields if three particular options are chosen. I'm using the following JS code that works fine with radio buttons but I'm having trouble getting it to work properly in the SELECT menu. I only want the toggle function to show up on the first three fields but not on the rest. Can someone tell me what the problem is? I've tried the following and neither of the javascript events work.

    Code:
    function toggle(id) {
    	if (document.getElementById) {
    		var el = document.getElementById(id);
    		el.style.display = (el.style.display == 'block') ? 'none' : 'block';
    	}
    }
    
    <select name="address" id="address">
      <option value="">Please Select</option>
      <option value="1" onfocus="toggle('previousAddress');">1</option>
      <option value="2" onclick="toggle('previousAddress');">2</option>
      <option value="3" onblur="toggle('previousAddress');">3</option>
      .....more....
    </select>
    
    <div id="previousAddress">
      stuff....
    </div>
    John Saunders

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    function 
    toggle(id) {
        if (
    document.getElementById) {
            var 
    el document.getElementById(id);
            
    el.style.display = (el.style.display == 'block') ? 'none' 'block';
        }
    }

    //-->
    </script></head>

    <body>

    <select name="address" id="address" onchange="javascript:eval(this.options[this.selectedIndex].value);">
      <option value="">Please Select</option>
      <option value="toggle('previousAddress');">1</option>
      <option value="toggle('previousAddress');">2</option>
      <option value="toggle('previousAddress');">3</option>
      .....more....
    </select>

    <div id="previousAddress">
      stuff....
    </div>
    </body>

    </html> 

  3. #3
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help. I tried it out and it works great when showing the div, but it isn't saving the value of the option (1, 2, 3, etc.) which I need to be able to see in the email that I get when the form is submitted.

    Can you please tell me how I can see this info?
    John Saunders

  4. #4
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, I get a JS error if I select an option in the SELECT box that doesn't have value="toggle('partnerInfo');".
    John Saunders

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can use '0', '1', '2', '3' in the array and select options if you wish


    PHP Code:
    <html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    var 
    DisplayAry=new Array(3);
    DisplayAry['joe']='tba';
    DisplayAry['tom']='previousAddress';
    DisplayAry['dick']='previousAddress';
    DisplayAry['harry']='previousAddress222';

    function 
    toggle(nu) {
    alert(DisplayAry[nu])
     if (
    document.getElementById(DisplayAry[nu])) {
      
    obj=document.getElementById(DisplayAry[nu])
      
    obj.style.display = (obj.style.display == 'block') ? 'none' 'block';
     }
    }

    //-->
    </script></head>

    <body>

    <select name="address" id="address" onchange="javascript:toggle(this.options[this.selectedIndex].value);">
      <option value="joe">Please Select</option>
      <option value="tom">1</option>
      <option value="dick">2</option>
      <option value="harry">3</option>
      .....more....
    </select>

    <div id="previousAddress" style="position:relative;display:block;" >
      stuff....
    </div>
    <div id="previousAddress222" style="position:relative;display:block;">
     nore stuff....
    </div>
    </body>

    </html> 

  6. #6
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! It's working now! Is there anyway that you could make it so if someone accidentally selections 1 and they select 2 instead it won't hide the DIV? Here's an example:

    1
    2
    3
    4

    I just want to show the DIV if 2 or 3 are selected. Currently, if I select 2 then select 3, it will hide the DIV. I would like it to always show the DIV if 2 or 3 are clicked, but not show it or hide it if 1 or 4 are selected.
    John Saunders

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way you discribe there is no way to hide a div once displayed

    but play with this

    PHP Code:
    <html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    var 
    DisplayAry=new Array(3);
    DisplayAry['joe']='tba';
    DisplayAry['tom']='previousAddress';
    DisplayAry['dick']='previousAddress';
    DisplayAry['harry']='previousAddress222';

    function 
    toggle(obj) {
     
    show=obj.options[obj.selectedIndex].value;
     if (!
    gEBId(DisplayAry[show])){ return; } // optional
    // these lines optional
     
    for (i=1;i<obj.options.length;i++){
      if (
    gEBId(DisplayAry[obj.options[i].value])){
       
    gEBId(DisplayAry[obj.options[i].value]).style.display='none';
      }
     }
    // end these lines
     
    if (gEBId(DisplayAry[show])){
      
    gEBId(DisplayAry[show]).style.display='block';
     }
    }

    function 
    gEBId(id){
     return 
    document.getElementById(id);
    }
    //-->
    </script></head>

    <body>

    <select name="address" id="address" onchange="javascript:toggle(this);">
      <option value="joe">Please Select</option>
      <option value="tom">1</option>
      <option value="dick">2</option>
      <option value="harry">3</option>
      .....more....
    </select>

    <div id="previousAddress" style="position:relative;display:none;" >
      stuff....
    </div>
    <div id="previousAddress222" style="position:relative;display:none;">
    nore stuff....
    </div>
    </body>

    </html> 

  8. #8
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That works good! I don't suppose there's anyway to do something like:

    if value does not equal value in array, style.display: none;? for any divs listed in ='DIVHERE'; in the array.

    (Sorta like the last IF statement except none instead of block.)
    John Saunders

  9. #9
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    remove line

    if (!gEBId(DisplayAry[show])){ return; } // optional


Bookmarks

Posting Permissions

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