Simple multi CSS div display from drop down box!

benlekreme · 07-07-2009, 04:39 PM

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

vwphillips · 07-07-2009, 04:59 PM

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>

benlekreme · 07-07-2009, 05:33 PM

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?

jmrker · 07-07-2009, 08:24 PM

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>

benlekreme · 07-07-2009, 09:02 PM

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!

jmrker · 07-07-2009, 11:24 PM

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.

benlekreme · 07-08-2009, 12:15 AM

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

jmrker · 07-08-2009, 12:22 AM

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.

benlekreme · 07-08-2009, 01:02 AM

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!

jmrker · 07-08-2009, 01:16 AM

Quote:

Originally Posted by benlekreme

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!

benlekreme · 07-08-2009, 01:39 AM

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

jmrker · 07-08-2009, 05:32 AM

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?

vwphillips · 07-08-2009, 09:54 AM

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>