CodingForums.com - Simple multi CSS div display from drop down box!

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Simple multi CSS div display from drop down box! (http://www.codingforums.com/showthread.php?t=171093)

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 :thumbsup:

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>

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?

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>

:thumbsup:

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! :thumbsup:

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  as shown in question #2.

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 :thumbsup:

Sorry for being a pain in the back side ;)

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. :)

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

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!

Quote:

Originally Posted by benlekreme (Post 836432)

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

Just show me how to change to condition for each selection. ...

Piss poor! :rolleyes:

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!
:confused:

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

:thumbsup:

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?

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>