Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Thumbs up Simple multi CSS div display from drop down box!

    Hi guys,

    Sorry my Javascript knowledge is seriously more rusty than I had original hoped for

    I'm trying to use a conditional drop-down box to display certain CSS Div's based on certain selections. I found some code on here but i'm having issues getting it to work

    Can't remember what to do regarding 'if' and 'if else' to get this functioning properly.

    Code:
    <script language="javascript">
    
    function Go(oSelect)
    {
    var oDiv1 = document.getElementById('form2a'), oDiv2 = document.getElementById('form2b'), oDiv3 = document.getElementById('form2c'),data = oSelect.options[oSelect.selectedIndex].value;
    if (data == "1")
    
    oDiv1.style.display = 'block';
    oDiv2.style.display = 'block';
    oDiv3.style.display = 'block';
    
    if (data == "2")
    
    oDiv1.style.display = 'none';
    oDiv2.style.display = 'block';
    oDiv3.style.display = 'block';
    
    if (data == "3")
    
    
    oDiv1.style.display = 'block';
    oDiv2.style.display = 'none';
    oDiv3.style.display = 'block';
    
    if (data == "4")
    
    oDiv1.style.display = 'block';
    oDiv2.style.display = 'block';
    oDiv3.style.display = 'none';
    }
    </script>
    </head>
    
    <body>
    <form name="form1">
    <select name="data" size="1" onchange="return Go(this)">
    <option value selected="selected">Select</option>
    <option name="1" value="1">select1</option>
    <option name="2" value="2">select2</option>
    <option name="3" value="3">select3</option>
    <option name="4" value="4">select4</option>
    </select>
    </form>
    
    <div id="form2a" style="display:none">
    shows content ONE
    </div>
    <div id="form2b" style="display:none">
    shows content TWO
    </div>
    <div id="form2c" style="display:none">
    shows content Three
    </div>
    Thanks in advance

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,493
    Thanks
    3
    Thanked 499 Times in 486 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script language="javascript">
    
    function Go(oSelect)
    {
     var oDiv = [document.getElementById('form2a'),document.getElementById('form2b'),document.getElementById('form2c')]
     var data = oSelect.value;
     for (var z0=0;z0<oDiv.length;z0++) oDiv[z0].style.display = 'block';
     if(oDiv[data-2]) oDiv[data-2].style.display = 'none';
    }
    </script>
    </head>
    
    <body>
    <form name="form1">
    <select name="data" size="1" onchange="return Go(this)">
    <option value selected="selected">Select</option>
    <option name="1" value="1">select1</option>
    <option name="2" value="2">select2</option>
    <option name="3" value="3">select3</option>
    <option name="4" value="4">select4</option>
    </select>
    </form>
    <div id="form2a" style="display:none">
    shows content ONE
    </div>
    <div id="form2b" style="display:none">
    shows content TWO
    </div>
    <div id="form2c" style="display:none">
    shows content Three
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    benlekreme (07-07-2009)

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks VW, Great piece of Maths there! ....but I don't think i explained myself properly...

    The idea is that I need to add new conditions to the script, I need about 50 conditions in all based on any random combination, hence having to declare the condition for each drop-down option.

    For example,
    option 6 might be: 1-block, 2 - none, 3 - block/
    option 7: 1-block, 2 -none, 3 -none
    option 8: 1-block, 2-block, 3-block

    Any ideas?

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Lightbulb

    Little late to the dance, but using VW's idea, try this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
      <title>Random CSS Boxes</title>
    </head>
    <body>
    <script language="javascript">
    // Modified from: http://codingforums.com/showthread.php?t=171093
    
    function Go(oSelect) {
      var formCnt = 5;
      for (var z=1; z<=formCnt; z++) { document.getElementById('form'+z).style.display = 'none'; }
      var data = parseInt(oSelect.value,10).toString(2);
      while (data.length < formCnt) { data = '0'+data; }
      for (var z=0; z<data.length; z++) {
        if (data.charAt(z) == '1') { document.getElementById('form'+(formCnt-z)).style.display = 'block'; }
      }
    }
    </script>
    </head>
    
    <body>
    <form name="form1">
    <select id="DATA" name="data" size="1" onchange="return Go(this)">
    <option value selected="selected">Select</option>
    <script type="text/javascript">
      var maxSize = 32;		// 64, 128, 256, etc.
      var elem = document.getElementById("DATA");
      elem.options.length = 0;
      for (i=1; i<maxSize; i++) {
        elem.options[elem.options.length] = new Option(i,i);
    
    // options above could be made random if desired:  
    //    var r = Math.floor(Math.random()*(maxSize-1))+1;
    //    elem.options[elem.options.length] = new Option(r,i);
    // could add checks to avoid duplications
    // or create array of valid values that can be used
    
      }
    </script>
    </select>
    <!-- script above creates the following -- remove after viewing
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
    -->
    </form>
    
    <div id="Content">
    <div id="form1" style="display:none">shows content ONE</div>
    <div id="form2" style="display:none">shows content TWO</div>
    <div id="form3" style="display:none">shows content THREE</div>
    <div id="form4" style="display:none">shows content FOUR</div>
    <div id="form5" style="display:none">shows content FIVE</div>
    
    <!-- not currently used for 64, 128, 256, etc.
    <div id="form6" style="display:none">shows content SIX</div>
    <div id="form7" style="display:none">shows content SEVEN</div>
    <div id="form8" style="display:none">shows content EIGHT</div>
    -->
    </div>
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    benlekreme (07-07-2009)

  • #5
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you so much jmrker... but....I'm so Sorry! You lot are crazy geniuses !!!!!!!!!!!!!!!!

    I don't think I'm articulating this problem very well.... simply I need control over what each selection creates.

    So I know that selection (1) needs to show DIV 1,2,3, (2) needs to show 2 & 3... (49) Needs to show Div 3,4.. and so on.

    Hence the original question based on conditions!

    Please seek clarification if you need it before making me feel extremely guilty!!!

    Thank you so much for your efforts so far, you don't know much they're appreciated!

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Question Still confused after all this time ...

    More questions then:

    1. How many <div> sections do you want to display. Script allows for 1-8, currently 5.

    2. Specify which <div> is displayed via a binary number converted to decimal.
    ie,
    Code:
    <option value="7">selection 1</option>    <!--   7 = 00111 -->
    <option value="6">selection 2</option>    <!--   6 = 00110 -->
    <option value="12">selection 49</option> <!-- 12 = 01100 -->
    What other numbers do you want a option entries?

    3. Do you want an array assignment rather than the random generation?
    ie,
    Code:
    DivValues = ['','7','6',..............'12']; // set-up values for select options
    This method would require small change to generation script.
    Alternatively, you can use the longer hard-coded way commented out via the <!-- xxx --> as shown in question #2.

  • Users who have thanked jmrker for this post:

    benlekreme (07-08-2009)

  • #7
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question

    Big thanks again....

    Basically what I am trying to achieve is displaying what is available in each city when user selects their city in the drop-down-box.

    There are 4 div's...

    So say for city 1, the images/info available to them is shown in Div 1 & Div 2
    city 2 has Div 1, 2 & 4
    city 3 has Div 2 & 4
    city 4 has Div 3 & 4
    city 5 has Div 1, 2, 3 & 4
    and so on for 50 or cities

    I don't need it to be random, I just need to declare what each selection shows, as it may change in the future.

    I think thats what you're trying to ask in question 3.

    Can't thank you enough for all the trouble I'm putting you through

    Sorry for being a pain in the back side

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts
    Post a link to your images and list what combinations you need for each city.

    How are the images related to the <DIV> tags?

    I'm not a very good mind reader.

  • Users who have thanked jmrker for this post:

    benlekreme (07-08-2009)

  • #9
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Cool

    What's the matter with your mind reading abilities then?

    I'm using a mix of text and image for each bit of info, so hence why I'm going down the <div> route!

    For example:

    <div id="form2a" style="display:none">
    <img src"image1>
    info here
    </div>

    City 1 needs to Show: Div1, Div 2, Div 3,
    City 2 needs to show: Div1, Div 2, Div 4.

    Just show me how to change to condition for each selection. I feel like i've wasted enough of your time already!

    You're a legend!

  • #10
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Arrow

    Quote Originally Posted by benlekreme View Post
    What's the matter with your mind reading abilities then?

    Just show me how to change to condition for each selection. ...
    Piss poor!

    I need to know the conditions you wish to set/display to tell you what to do next.
    The information is already there, I just need to know what your assignments are!

  • Users who have thanked jmrker for this post:

    benlekreme (07-08-2009)

  • #11
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    8
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Do you mean this mate?
    Code:
    		Div 1	Div 2	Div 3	Div 4
    City	1	Yes	Yes	Yes	No
    City	2	Yes	Yes	Yes	No
    City	3	Yes	No	Yes	No
    City	4	Yes	No	Yes	No
    City	5	No	No	Yes	No
    City	6	Yes	Yes	Yes	No
    City	7	Yes	Yes	Yes	No
    City	8	Yes	Yes	Yes	No
    City	9	Yes	Yes	Yes	No
    City	10	Yes	No	No	No
    City	11	Yes	Yes	Yes	No
    City	12	Yes	Yes	Yes	No
    City	13	Yes	Yes	Yes	No
    City	14	Yes	Yes	Yes	No
    City	15	Yes	Yes	Yes	No
    City	16	Yes	No	Yes	No
    City	17	Yes	Yes	Yes	No
    City	18	No	No	No	Yes
    City	19	Yes	Yes	Yes	No
    City	20	Yes	Yes	Yes	No
    City	21	Yes	Yes	Yes	No
    City	22	Yes	Yes	Yes	No
    City	23	Yes	Yes	Yes	No
    City	24	Yes	Yes	Yes	No
    City	25	Yes	Yes	Yes	No
    City	26	Yes	No	No	No
    City	27	Yes	No	Yes	No
    City	28	Yes	Yes	Yes	No
    City	29	Yes	No	No	No
    City	30	Yes	Yes	Yes	No
    City	31	Yes	Yes	Yes	No
    City	32	Yes	Yes	Yes	No
    City	33	Yes	Yes	Yes	No
    City	34	Yes	No	Yes	No
    City	35	Yes	Yes	Yes	No
    City	36	Yes	Yes	Yes	No
    City	37	No	No	Yes	No
    City	38	Yes	Yes	Yes	No
    City	39	Yes	Yes	Yes	No
    City	40	Yes	Yes	Yes	No
    City	41	Yes	Yes	Yes	No
    City	42	Yes	Yes	Yes	No
    City	43	Yes	Yes	Yes	No
    City	44	Yes	No	Yes	No
    City	45	No	Yes	Yes	No
    City	46	Yes	Yes	Yes	No
    City	47	Yes	No	Yes	No
    City	48	Yes	Yes	Yes	No
    City	49	Yes	No	No	No
    City	50	Yes	Yes	Yes	No
    City	51	Yes	Yes	Yes	No

  • #12
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts
    Yes, that will help.

    Additional question ...
    Are the images or text associated with the <DIV> tags all the same
    or do the contents change with the CITY selected?

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,493
    Thanks
    3
    Thanked 499 Times in 486 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script language="javascript">
    
    function Go(oSelect)
    {
     var oDiv = [document.getElementById('form2a'),document.getElementById('form2b'),document.getElementById('form2c'),document.getElementById('form2d')];
     var data = oSelect.value.split(',');
     for (var z0=0;z0<oDiv.length;z0++) oDiv[z0].style.display = 'block';
     for (var z0=0;z0<data.length;z0++){
      if(oDiv[data[z0]-1]) oDiv[data[z0]-1].style.display = 'none';
     }
    }
    </script>
    </head>
    
    <body>
    <form name="form1">
    <select name="data" size="1" onchange="return Go(this)">
    <option value selected="selected">Select</option>
    <option value="4" >City 1</option>
    <option value="4" >City 2</option>
    <option value="2,4" >City 3</option>
    <option value="2,4" >City 4</option>
    <option value="1,2,4" >City 5</option>
    </select>
    </form>
    <div id="form2a" style="display:none">
    shows content ONE
    </div>
    <div id="form2b" style="display:none">
    shows content TWO
    </div>
    <div id="form2c" style="display:none">
    shows content Three
    </div>
    <div id="form2d" style="display:none">
    shows content Four
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Tags for this Thread

    Posting Permissions

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