Show/Hide Layers based on form option

Discussion in 'Javascript' started by veganeater, Jan 18, 2005.

  1. veganeater

    veganeater Guest

    Hi,

    I'm wondering if there's a way that I can select which <div> to show based
    on the user's selection from a dropdown/listbox form.

    <form name="form1" method="post" action="">
    <select name="internet">
    <optgroup label="Network">
    <option label="option1">Internet</option>
    </optgroup>
    <optgroup label="Access">
    <option label="option2.0">Portal</option>
    <option label="option2.1">Webmail</option>
    <option label="option2.2">POP3 Email</option>
    <option label="option2.3">Messenger</option>
    <option label="option2.4">Newsgroups</option>
    </optgroup>
    </select>
    </form>

    Is there a way that I can have a particular <div> show based on a selection
    from this list? I know that you can not directly apply actions to the
    options, so it presumably there has to be a javascript method of doing it...
    If anyone can point me in the right direction, it would be greatly
    appreciated.

    Thanks in advance!

    |veganeater|

    // my apologies for the xpost on comp.lang.java.javascript
     
    veganeater, Jan 18, 2005
    #1
    1. Advertising

  2. veganeater

    Dag Sunde Guest

    "veganeater" <> wrote in message
    news:...
    > Hi,
    >
    > I'm wondering if there's a way that I can select which <div> to show based
    > on the user's selection from a dropdown/listbox form.
    >
    > <form name="form1" method="post" action="">
    > <select name="internet">
    > <optgroup label="Network">
    > <option label="option1">Internet</option>
    > </optgroup>
    > <optgroup label="Access">
    > <option label="option2.0">Portal</option>
    > <option label="option2.1">Webmail</option>
    > <option label="option2.2">POP3 Email</option>
    > <option label="option2.3">Messenger</option>
    > <option label="option2.4">Newsgroups</option>
    > </optgroup>
    > </select>
    > </form>
    >
    > Is there a way that I can have a particular <div> show based on a

    selection
    > from this list? I know that you can not directly apply actions to the
    > options, so it presumably there has to be a javascript method of doing

    it...
    > If anyone can point me in the right direction, it would be greatly
    > appreciated.
    >


    the label attribute for the option element is not in use by any browser
    I know of...

    Here is a crude example:

    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <title>TestPage</title>

    <script type="text/javascript">
    function internetSelect() {
    var selectedValue = document.getElementById("internet").value;
    document.getElementById("opt10").style.visibility = "hidden";
    document.getElementById("opt20").style.visibility = "hidden";
    document.getElementById("opt21").style.visibility = "hidden";
    document.getElementById("opt22").style.visibility = "hidden";
    if(selectedValue == "option10")
    document.getElementById("opt10").style.visibility = "visible";
    if(selectedValue == "option20")
    document.getElementById("opt20").style.visibility = "visible";
    if(selectedValue == "option21")
    document.getElementById("opt21").style.visibility = "visible";
    if(selectedValue == "option22")
    document.getElementById("opt22").style.visibility = "visible";
    }
    </script>
    </head>

    <body onload="internetSelect();">
    <select id="internet" onchange="internetSelect();">
    <optgroup label="Network">
    <option value="option10">Internet</option>
    </optgroup>
    <optgroup label="Access">
    <option value="option20">Portal</option>
    <option value="option21">Webmail</option>
    <option value="option22">POP3 Email</option>
    </optgroup>
    </select>

    <div id="opt10" style="background-color:#00FFFF; visibility:hidden;
    border: 1px solid black;">
    <h2>Internet</h2>
    </div>
    <div id="opt20" style="background-color:#FFFF00; visibility:hidden;
    border: 1px solid black;">
    <h2>Portal</h2>
    </div>
    <div id="opt21" style="background-color:#FF99FF; visibility:hidden;
    border: 1px solid black;">
    <h2>Webmail</h2>
    </div>
    <div id="opt22" style="background-color:#9999FF; visibility:hidden;
    border: 1px solid black;">
    <h2>POP3 Email</h2>
    </div>


    </body>
    </html>


    --
    Dag.
     
    Dag Sunde, Jan 18, 2005
    #2
    1. Advertising

  3. veganeater

    RobB Guest

    veganeater wrote:
    > Hi,
    >
    > I'm wondering if there's a way that I can select which <div> to show

    based
    > on the user's selection from a dropdown/listbox form.
    >
    > <form name="form1" method="post" action="">
    > <select name="internet">
    > <optgroup label="Network">
    > <option label="option1">Internet</option>
    > </optgroup>
    > <optgroup label="Access">
    > <option label="option2.0">Portal</option>
    > <option label="option2.1">Webmail</option>
    > <option label="option2.2">POP3 Email</option>
    > <option label="option2.3">Messenger</option>
    > <option label="option2.4">Newsgroups</option>
    > </optgroup>
    > </select>
    > </form>
    >
    > Is there a way that I can have a particular <div> show based on a

    selection
    > from this list? I know that you can not directly apply actions to the
    > options, so it presumably there has to be a javascript method of

    doing it...
    > If anyone can point me in the right direction, it would be greatly
    > appreciated.
    >
    > Thanks in advance!
    >
    > |veganeater|
    >
    > // my apologies for the xpost on comp.lang.java.javascript


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">

    ..showhide {
    width: 130px;
    height: 16px;
    font-weight: 800;
    text-align: center;
    border: 2px black dashed;
    display: none;
    }

    </style>
    <script type="text/javascript">

    var divs = {
    'option1' : 'InternetDIV' ,
    'option2.0' : 'PortalDIV' ,
    'option2.1' : 'WebmailDIV' ,
    'option2.2' : 'POP3DIV' ,
    'option2.3' : 'MessengerDIV' ,
    'option2.4' : 'NewsgroupsDIV'
    }

    function showhide(obj)
    {
    var el, v = obj.options[obj.selectedIndex].value;
    for (var opt in divs)
    if (el = document.getElementById(divs[opt]))
    el.style.display = (opt != v) ? 'none' : 'block';
    }

    window.onload = function()
    {
    document.getElementById('internet').onchange();
    }

    </script>
    </head>
    <body>
    <form name="form1" method="post" action="">
    <select id="internet" name="internet" onchange="showhide(this)">
    <optgroup label="Network">
    <option value="option1" selected="selected">Internet</option>
    </optgroup>
    <optgroup label="Access">
    <option value="option2.0">Portal</option>
    <option value="option2.1">Webmail</option>
    <option value="option2.2">POP3 Email</option>
    <option value="option2.3">Messenger</option>
    <option value="option2.4">Newsgroups</option>
    </optgroup>
    </select>
    </form>
    <div id="InternetDIV" class="showhide">Internet</div>
    <div id="PortalDIV" class="showhide">Portal</div>
    <div id="WebmailDIV" class="showhide">Webmail</div>
    <div id="POP3DIV" class="showhide">POP3 Email</div>
    <div id="MessengerDIV" class="showhide">Messenger</div>
    <div id="NewsgroupsDIV" class="showhide">Newsgroups</div>
    </body>
    </html>
     
    RobB, Jan 19, 2005
    #3
  4. veganeater

    veganeater Guest

    Wow, thanks guys!

    I was concerned that it would be far more difficult then it apparently is -
    or as you made it look.

    Dag Sunde - I understand your concern about the use of the label descriptor
    on the options tag being supported on all browsers. Unfortunalty - and much
    to my shgrin - I'm designing a small application that is intended to run
    /only/ on MSIE6+. Kind of a pain as I, myself, use Opera... oh, well...

    Anyhow, thanks again!

    |veganeater|
     
    veganeater, Jan 19, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Steve Speirs
    Replies:
    0
    Views:
    162
    Steve Speirs
    Jun 27, 2003
  2. geotso

    show/hide layers onLoad

    geotso, Jan 11, 2005, in forum: Javascript
    Replies:
    2
    Views:
    123
    geotso
    Jan 13, 2005
  3. Replies:
    7
    Views:
    265
  4. chris_huh

    Dynamic forms, show/hide layers

    chris_huh, Aug 11, 2006, in forum: Javascript
    Replies:
    0
    Views:
    101
    chris_huh
    Aug 11, 2006
  5. therealvibe

    show hide layers

    therealvibe, Apr 16, 2007, in forum: Javascript
    Replies:
    3
    Views:
    118
    Jeff North
    Apr 16, 2007
Loading...

Share This Page