Results 1 to 6 of 6

Thread: Having Trouble - Simple thing..

  1. #1
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Having Trouble - Simple thing..

    I'm trying to make a script so if you select a value in the select box of either 1, 2 or 3 differnet Divs will show. Ideally i want all 3 divs to show if you select 3, or 2 to show if you select 2, or only 1 to show if you select 1.

    Here is a sample of the script:

    <script language="JavaScript"><!--
    function UpdateList(x) {
    if (x.options[x.selectedIndex].value == "1") {
    document.getElementById("Products_1").style.display = "";
    }
    if (x.options[x.selectedIndex].value == "2") {
    document.getElementById("Products_2").style.display = "";
    }
    if (x.options[x.selectedIndex].value == "3") {
    document.getElementById("Products_3").style.display = "";
    }

    }
    //--></script>

    The select box:

    <select name="items1" class="select" id="items1" onChange="UpdateList(this);">
    <% c=3

    for i = 1 to c %>
    <option><%=i%></option>
    <%Next%>
    </select>

    Sample div:

    <div id="Products_<%=i%>" style="display:none;">text here.
    </div>

    Any help would be greatly appreciated!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That looks like some asp you've got thrown in there with your javascript. A link to the live page would be useful to make sure that the markup is being generated as expected:

    Please post a link to the page on your site that contains the problematic code so we can check it out.


    I'll have a bit more of a look at this to see if the javascript part seems workable or not 'as is'. In any case, this should be easy enough to do.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Something like this would work out:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Select Divs - Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .prods div {
    display:none;
    }
    </style>
    <script type="text/javascript">
    <!--
    function UpdateList(x) {
    for (var i = 3; i > 0; --i)
    document.getElementById("Products_"+i).style.display = "none";
    if (x.selectedIndex == 1) { 
    document.getElementById("Products_1").style.display = "block";
    }
    if (x.selectedIndex == 2) { 
    document.getElementById("Products_1").style.display = "block";
    document.getElementById("Products_2").style.display = "block";
    }
    if (x.selectedIndex == 3) { 
    document.getElementById("Products_1").style.display = "block";
    document.getElementById("Products_2").style.display = "block";
    document.getElementById("Products_3").style.display = "block";
    }
    
    }
    window.onload=function(){UpdateList(document.getElementById('items1'));};
    // -->
    </script>
    
    </head>
    <body>
    <div>
    The select box:<br>
    <select name="items1" class="select" id="items1" onchange="UpdateList(this);">
    <option>Select&nbsp;</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    </select><br>
    
    </div>
    <div>
    divisions:<br>
    </div>
    
    <div class="prods">
    <div id="Products_1">text 1 here.
    </div>
    <div id="Products_2">text 2 here.
    </div>
    <div id="Products_3">text 3 here.
    </div>
    </div>
    </body>
    </html>
    But, at that rate, the function could be simplified:

    Code:
    function UpdateList(x) {
    for (var i = 3; i > 0; --i)
    document.getElementById("Products_"+i).style.display = "none";
    for (var i = x.selectedIndex; i > 0; --i)
    document.getElementById("Products_"+i).style.display = "block";
    }
    or even:

    Code:
    function UpdateList(x) {
    for (var i = x.options.length-1; i > 0; --i)
    document.getElementById("Products_"+i).style.display = "none";
    for (var i = x.selectedIndex; i > 0; --i)
    document.getElementById("Products_"+i).style.display = "block";
    }
    In the last version, the script would calculate everything on the basis of the number options that were in the select.
    Last edited by jscheuer1; 05-09-2008 at 08:21 PM. Reason: add alternatives
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    May 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Awesome thanks

    Thanks, I used the 2nd option and worked well!


    You guys make it look so easy

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Simpler still:

    Code:
    function UpdateList(x) {
      for (var s = x.selectedIndex, i = x.options.length-1; i > 0; --i)
        document.getElementById("Products_" + i).style.display = i <= s? "block" : "none";
    };
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Apr 2008
    Posts
    38
    Thanks
    9
    Thanked 1 Time in 1 Post

    Default

    <script language="JavaScript"><!--
    function UpdateList(x) {
    var xValue = x.options[x.selectedIndex].value;
    document.getElementById("Products_" + xValue).style.display = "";
    if (xValue == "3") {
    for (var i = 1; i < 4; i++)
    document.getElementById("Products_" + i).style.display = "";
    }

    }
    //--></script>

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
  •