Can some one help me figure this one out Drop Down Menus

@sinisterApr 18.2008

Ok so here is what I am trying to figure out. I need to put 4 dropdown selection menus on a page with a submit button. Each menu will have different choices in it and by the combination of those 4 choices it will display some text on the page. similar to the way a grid would work but without the grid. any ideas on how to do this? know where I can see some code similar to this? any help is greatly appreciated

to post a comment

JavaScript

13 Comments(s) _↴

@FangApr 18.2008 — #When is the text displayed? On a selection, before or after submission?

@sinisterauthorApr 18.2008 — #Thankyou for your reply the text will be displayed after a combination of items from the 4 dropdown boxes are selected then the submit button is pressed.

@JMRKERApr 18.2008 — #Is this more to your needs?

[code=php]
 <html>
 <head>
 <title> Drop-Down Grid </title>
 <script type="text/javascript">
 function ShowPicks() {
 var str = '';
 var DD = '';
 for (i=0; i<4; i++) {
 DD = document.getElementById('DD'+i);
 str += DD.options[DD.selectedIndex].value+'n';
 } 
 return str;
 }
 </script>
 </head>
 <body>
 <h1> Drop-Down Grid </h1>
 <select id="DD0">
 <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>
 </select>
 <select id="DD1">
 <option value="a">a</option>
 <option value="b">b</option>
 <option value="c">c</option>
 <option value="d">d</option>
 <option value="e">e</option>
 </select>
 <select id="DD2">
 <option value="one">one</option>
 <option value="two">two</option>
 <option value="three">three</option>
 <option value="four">four</option>
 <option value="five">five</option>
 </select>
 <select id="DD3">
 <option value="A">A</option>
 <option value="B">B</option>
 <option value="C">C</option>
 <option value="D">D</option>
 <option value="E">E</option>
 </select>
 <button onClick="document.getElementById('Picks').value=ShowPicks()">Pseudo-Submit</button>
 <br>
 <textarea id="Picks" rows="5"></textarea>
 </body>
 </html>
 [/code]

@sinisterauthorApr 18.2008 — #Very close what I am looking for is

if x is chosen from menu 1

and y is chosen from menu 2

and 1 is chosen from menu 3

then it will load the text that applies to those choices.

eg.

menu 1 choices are teacher, student, volunteer, contributor

menu 2 choices are grade level 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12

menu 3 choices are Science, Technology, Engineering, Mathematics

if you chose teacher, grade level 6, Science it will load this text

"Plate tectonics accounts for important features of Earth's surface and major geologic events. As a basis for understanding this concept:

Students know evidence of plate tectonics is derived from the fit of the continents; the location of earthquakes, volcanoes, and midocean ridges; and the distribution of fossils, rock types, and ancient climatic zones."

If you chose Teacher, grade level 1, Technology it will load this text

"Scientific progress is made by asking meaningful questions and conducting careful investigations. As a basis for understanding this concept and addressing the content in the other three strands, students should develop their own questions and perform investigations. Students will:

Repeat observations to improve accuracy and know that the results of similar scientific investigations seldom turn out exactly the same because of differences in the things being investigated, methods being used, or uncertainty in the observation."

ect. ect. Thanks again for the help I appreciate you guys lending a hand on this one

@JMRKERApr 19.2008 — #Why do you need 4 drop down selections when you only have 3 menu choices?

Also, you will need 4 x 12 x 4 text descriptions.

One easy way would be to put each description in a separate hidden <DIV> tag. (ie, from <div id="T000'> to <div id="T4C4">)

Then, when you submit, toggle the display of <DIV> area that matches the ID name of your selections.

If you change the options values for each menu to be used to:

'DD0' 1,2,3,4

'DD1' 1,2,3,4,5,6,7,8,9,A,B,C

'DD2' 1,2,3,4

In you first example, the ShowPicks could return: 'T161'

and the second example would return the id of: 'T112'

Use the return value to determine which <DIV> areas to hide or display.

@sinisterauthorApr 19.2008 — #is there any way I can beg you to show me an example of what you are talking about I don't quite understand here is the code I am working with so far

[CODE]<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <title>Services</title>
 <link href="layout.css" rel="stylesheet" type="text/css" />
 <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body id="page_3">
 <div class="mbg">
 <div class="main">
 <!--==========header=========== -->
 <div id="header">
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24"
 width="766" height="427">
 <param name="movie" value="flash/header_v8.swf?button=3" /> 
 <param name="quality" value="high" />
 <param name="menu" value="false" />
 <!--[if !IE]> <-->
 <object data="flash/header_v8.swf?button=3"
 width="766" height="427" type="application/x-shockwave-flash">
 <param name="quality" value="high" />
 <param name="menu" value="false" />
 <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
 FAIL (the browser should render some flash content, not this).
 </object>
 <!--> <![endif]-->
 </object>
 </div>
 <!--========//header=========== -->
 <!-- -->
 <!--==========content=========== -->
 <div id="content">
 <div class="title"><div><img src="images/3_h_1.gif" alt="" /></div></div>
 <strong>Please make the proper menu selections below to display your information</strong>
 <div class="in5"></div>
 <p>Menu bars go here</p>
 <p><br />
 </p>
 <div class="title"><div><img src="images/3_h_2.gif" alt="" /></div></div>
 <strong>Text selected by the menu gets displayed here</strong>
 <div class="in5"></div>
 <div class="in15"></div>
 <img src="images/3_pic_1.jpg" class="pic" alt="" />
 <strong>bla bla bla space holder</strong>
 <strong>bla bla bla space holder</strong>
 <div class="in5"></div>
 bla bla bla space holderbla bla bla space holderbla bla bla space holderbla bla bla space holderbla bla bla space holderbla bla bla space holderbla bla bla space holder 
 <br class="clear" />
 <div class="in15"></div>
 <div class="line_x"><div class="clear"></div></div>
 <br />
 </div>
 <!--========//content=========== --> 
 </div> 
 </div>
 <!--==========footer=========== -->
 <div class="main">
 <div id="footer">
 <div> &copy; 2008 | <a href="index-6.html">Privacy Policy</a></div>
 </div>
 </div>
 <!--========//footer=========== -->
 </body>
 </html>[/CODE]

@JMRKERApr 19.2008 — #Here's a demonstration, but you've got a lot more typing to do.

I didn't have the contents for each selection, so it's just a kludge to demonstrate the actions.

[code=php]
 <html>
 <head>
 <title> Drop-Down Displays </title>
 <style type="text/css">
 .Togs { display:none; }
 </style>
 
 <script type="text/javascript">
 function ShowPicks() {
 var str = '';
 var DD = '';
 for (i=0; i<3; i++) {
 DD = document.getElementById('DD'+i);
 str += DD.options[DD.selectedIndex].value;
 } 
 return 'T'+str;
 }
 
 var OldTogs = 'T111';
 function Toggle(IDS) {
 document.getElementById(OldTogs).style.display = 'none';
 document.getElementById(IDS).style.display = 'block';
 OldTogs = IDS;
 //  alert('Selected: '+IDS);
 }
 // =======================================================
 /* 
 following just used to demonstrate idea
 real program should define each <div id="Togs"> contents
 where Togs = coded ID for the <div> tag
 */
 
 function CreateDIVs() {
 // create fake <div> tags until entered for real
 var TogsList = '123456789ABC';
 var tog = '';
 var str = '';
 for (o=0; o<4; o++) {
 for (g=0; g<12; g++) {
 for (s=0; s<4; s++) {
 tog = TogsList.charAt(o)+TogsList.charAt(g)+TogsList.charAt(s);
 str += '<div class="Togs" id="T'+tog+'">T'+tog+'</div>';
 }
 }
 }
 return str;
 }
 
 function ModifyDIVs() {
 document.getElementById('T161').innerHTML =
 "Plate tectonics accounts for important features of Earth's surface and major geologic events. "+
 "<br>As a basis for understanding this concept: "+
 "Students know evidence of plate tectonics is derived from the fit of the continents;  "+
 "the location of earthquakes, volcanoes, and midocean ridges; and the distribution of fossils,  "+
 "rock types, and ancient climatic zones.";
 
 document.getElementById('T112').innerHTML = 
 "Scientific progress is made by asking meaningful questions and conducting careful investigations.  "+
 "As a basis for understanding this concept and addressing the content in the other three strands,  "+
 "students should develop their own questions and perform investigations.  "+
 "Students will: Repeat observations to improve accuracy and know that the results of similar scientific  "+
 "investigations seldom turn out exactly the same because of differences in the things being investigated,  "+
 "methods being used, or uncertainty in the observation."
 }
 
 // could also use an Ajax routine to load in text file here instead.
 /*
 end of demonstration section
 */
 // =======================================================
 </script>
 
 </head>
 <body onLoad="ModifyDIVs()">
 <h1> Drop-Down Displays </h1>
 Occupation: 
 <select id="DD0">
 <option value="1">Teacher</option>
 <option value="2">Student</option>
 <option value="3">Volunteer</option>
 <option value="4">Contributor</option>
 </select>
 
 Grade: <select id="DD1">
 <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="A">10</option>
 <option value="B">11</option>
 <option value="C">12</option>
 </select>
 
 Section: <select id="DD2">
 <option value="1">Science</option>
 <option value="2">Technology</option>
 <option value="3">Engineering</option>
 <option value="4">Mathematics</option>
 </select>
 <button onClick="Toggle(ShowPicks())">Pseudo-Submit</button>
 
 <p><h2>
 Note:
 <br>Only 'Teacher, Grade 6 and Science' 
 <br> and 'Teacher, Grade 1 and Technology' currently active
 <h2><p>
 
 <script type="text/javascript">
 // demonstration code only ... real information to be inserted here.
 // =======================================================
 document.write(CreateDIVs());
 // =======================================================
 </script>
 
 </body>
 </html>
 [/code]

Good Luck!

?

@sinisterauthorApr 19.2008 — #Great that is exactly exactly what I was looking to do amazing thank you fo taking the time to help me on this one. . . I understand most of it but I am confused by what you werw saying here // alert('Selected: '+IDS);

}
[/QUOTE] and
/*

following just used to demonstrate idea

real program should define each <div id="Togs"> contents

where Togs = coded ID for the <div> tag

*/[/QUOTE] and

function CreateDIVs() {

// create fake <div> tags until entered for real[/QUOTE]

What is a Tog?

@JMRKERApr 19.2008 — #Answers in order posted:

1. // alert('Selected: '+IDS);

This is just a temporary debugging device to make sure I was passing

the correct <DIV> tag id to display. The // makes it a comment in JS

2. The /* ... */ are also another form of comment in JS

It just allows more lines to be displayed rather than putting // at the start of each line.

3. A 'tog' is just a variable name I used to hold the <DIV> tag ID

It might be better to use 'togs' as it represents:

a) t = Text

b) o = Occupation (teacher, ....)

c) g = Grade (1...12)

d) s = Section (Science, Technology ...) // just forgot to put 's' into variable name.

You will need to remove the fake creation of the <DIV> tags for the 'real' application. I just put that in for testing.

You can hard code the <DIV> regions with your own information, for example:

<i>
 </i>&lt;div class='Togs' id='T161'&gt;
 Plate tectonics accounts for important features of Earth's surface and major geologic events.
 &lt;br&gt;As a basis for understanding this concept:
 Students know evidence of plate tectonics is derived from the fit of the continents; 
 the location of earthquakes, volcanoes, and midocean ridges; and the distribution of fossils,
 rock types, and ancient climatic zones.
 &lt;/div&gt;

@sinisterauthorApr 23.2008 — #Ok so I got started but I think something must be wrong here is where I am at for some reason it will not show the result when I hit submit what do I have wrong? I had to attach the file the code is too long now.

[upl-file uuid=b3bf141d-f5c5-4fcb-befb-f8d81b60b47b size=16kB]index-2.txt[/upl-file]

@JMRKERApr 23.2008 — #Well, first, you have a number of errors.

Have you been looking at the error console?

1. Your assignment of T161 has unterminated string because you have

not ended each line with a "+ (until the last line). Note how the element of the array was formed in the earlier post.

2. In your assignment of T161, as is, you have additional "#" and "a" entries in the HTML formatted information.

This will upset the T161 assignment (with more unterminated string errors) unless you use '#' and 'a' entries instead.

3. Your entry for T161 is quite long. Instead of putting this information inside multiple <DIV> sections using .innerHTML, you might want to reference to a .HTML file instead, ie, like using a pop-up window.

If you must use the innerHTML route, perhaps using one <DIV> tag with the contents set to a one dimensional array element contents, instead of the multiple elements design, but this will also be prone to typing errors and will give you lots of difficult to trace errors.

4. You have added a 'K' to the grade, but there is no checks for this type of entry in the grade formation loop. If you check this grade, you would get another error.

5. You may want to look at how simple arrays work, by making a smaller version of the script with one or two line entries until you can see the logic at work. Then you could add the displays you want as replacement elements.

6. I suspect your final script will be quite large. Large files are more difficult to maintain, IMHO. They also take longer to load if you want all the contents in memory at one time, hence the recommendation to break the elements into smaller files, named perhaps: T1K1.html, T111.html, T121.html, ... T1C1.html

through ... T4K4.html, T414.html, ... T4C4.html

You can still form the ID tag with the earlier logic, but go to the display file

using a location.href="T161.html" instruction instead of the .innerHTML method. If you have the information grouped like this, I can modify the earlier post to show you how this might be done.

I'm not trying to discourage you, but you still have a steep learning curve ahead. Hope you're up for the challenge. ?

@sinisterauthorApr 23.2008 — #I am using Dreamweaver I don't think it has an error console but now I have noticed it does change the color of the text from black to blue when I add the "+

1. I fixed the issue with the "+ so I understand that concept now

2.I fixed the "a" by changing it to 'a' so in js you can not use the " like you do in html. But it works the same if you use ' instead?

3.I added the K and I think I know what you are talking about but I don't quite know how to do it. I added the K in the [CODE]var TogsList = '123456789ABCK';[/CODE] script but I think it should also be in the [CODE](g=0; g<12; G++)[/CODE] part as well but I am not sure how to do this.

[CODE]  var TogsList = '123456789ABCK'; 
 var tog = ''; 
 var str = ''; 
 for (o=0; o<4; o++) { 
 for (g=0; g<12; g++) { 
 for (s=0; s<4; s++) { 
 tog = TogsList.charAt(o)+TogsList.charAt(g)+TogsList.charAt(s); 
 str += '<div class="Togs" id="T'+tog+'">T'+tog+'</div>'; 
 } 
 } 
 } 
 return str; 
 }[/CODE]

4. I like the idea of breaking up the file but I would still like to have the text appear on the same page not in a popup or a new page. If I use the location.href="T161.html" method will that take the user to a new page or draw the information from that file and load it on the current page?

I appreciate your help you are not discouraging me I like learning new things and am up to the challenge?

@JMRKERApr 24.2008 — #Take a look at the MAJOR changes made in the attached file.

The array references are somewhat of a kludge, but it works. ?

You need to add back in your Flash and CSS link referances as I removed them since you did not provide them in your previous post.

See the example for:

TOGS[TogsElement(1,6,1)] =

"<h2>Focus on Earth Science</h2>"+ ......;

and TOGS[TogsElement(1,1,2)] = "....";

to see how to add your other displays.

Remember to re-name the attached file to .html instead of .txt

Post back with questions...

[upl-file uuid=13620b58-f0fd-4749-8c74-a474dd22f172 size=12kB]index-togs.txt[/upl-file]

Also in #JavaScript _↴

popup alert on selecting a checkbox javascript bootstrap question - Beginner why this function cannot be submitted

Success!

Help @sinister spread the word by sharing this article on Twitter...

Tweet This

Can some one help me figure this one out Drop Down Menus

13 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Can some one help me figure this one out Drop Down Menus

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴