Probably something simple

@TrowanFeb 25.2009

Hey I’m new to JavaScript and i was wondering if anyone could help me with this.

I want to create a drop down list with about 10 different options. But when the user selects an option i would like more information on the selected option elsewhere on the page. I want this to use the onChange methods so it is instant if they change. Any help is greatly appreciated.

Thanks in advance,
Ted

to post a comment

JavaScript

@TheBearMayFeb 25.2009 — #Couple of different ways to go about this, but firing off the onchange for the select should work. Then it's just a matter of populating a content area. One way:

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>Content based on Select</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script type="text/javascript">
 var txtArr = new Array();
 txtArr[0]="Select an option";
 txtArr[1]="This is the text for the first option selected";
 txtArr[2]="This is the text for the second option selected";
 
 function dispText(inx) {
 document.getElementById("oPut").innerHTML = txtArr[inx];
 }
 
 </script>
 </head>
 
 <body>
 <select onchange="dispText(this.selectedIndex);">
 <option>--Select one --</option>
 <option>Option 1</option>
 <option>Option 2</option>
 </select>
 
 <div id="oPut"></div>
 </body>
 </html>[/code]

@TrowanauthorFeb 25.2009 — #Thanks a lot, thats exactly what i needed =)

@JMRKERFeb 25.2009 — #This can be expanded further:

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Limit Selections&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 // For: http://www.webdeveloper.com/forum/showthread.php?t=203124
 
 function choice(t){
 var a = [1,2,3];
 var b = [4,5,6,7];
 var s = document.getElementById('second');
 var sl = s.options.length;
 for (var i = sl-1; i &gt;= 0 ; i--) { s.options[i] = null; }
 if (t.value != 0) {
 switch (t.value) {
 case "1" : c = a; break;
 case "2" : c = b; break;
 }
 for(i = 0; i &lt; c.length; i++ ) {
 s.options[i] = new Option(c[i],c[i],false,false);
 }
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;select id='first' onchange='choice(this)'&gt;
 &lt;option value='0'&gt;-&lt;/option&gt;
 &lt;option value='1'&gt;a&lt;/option&gt;
 &lt;option value='2'&gt;b&lt;/option&gt;
 &lt;/select&gt;
 &lt;select id='second'&gt;&lt;/select&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Probably something simple

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Probably something simple

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴