Dynamic Page Content using Selection List

Question: How can I replace a text node based on a user's selection in a dropdown menu? For example, a dropdown menu contains "Option 1", "Option 2", and "Option 3". When the user makes a selection, a sentence or two of text on the page should change to correspond to the option selected. I've seen scripts to replace text by clicking a button but not by making a selection.

Answer: The principle is the same as with buttons or text links so most of the description that follows repeats the same information as for those combinations. The following code shows the same simple example with three tables overlaying one another as with my text link version and works similarly except for being selected by a dropdown list instead of text links. THe table borders have also been set to zero to hide that the text is being displayed within tables.


The code to place the fields in the form is as follows:

<form name="ex" method="POST">
<div class="centre">
<select name="sel" size="1" onchange="showTable( document.ex.sel.options[document.ex.sel.selectedIndex].value);">
<option value="1" selected="selected">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<table class="centre" width="100" border="0"><tr><td>
<div style="position:relative;">
id="showone" style="visibility:hidden;position:absolute;top:0px;left:0px;">
<table class="centre"width="100" border="0"><tr><td class="centre">First</td></tr></table>
id="showtwo" style="visibility:hidden;position:absolute;top:0px;left:0px;">
<table class="centre" width="100" border="0"><tr><td class="centre">Second</td></tr></table>
id="showthree" style="visibility:hidden;position:absolute;top:0px;left:0px;">
<table class="centre" width="100" border="0"><tr><td class="centre">Third</td></tr></table>

The first section of the code (above the blank line) displays the dropdown selection list that your visitors will use to select which of the dynamic content that will be displayed. The second section contains the content to be displayed and uses Relative/Absolute styles to overlay the content into exactly the same position.

When the entry selected is changed a showTable function is called that will make the wanted content visible and hide the other content.

The function code is as follows:

var lastnum = 0;
var tbl = new Array(
tblsz = tbl.length;

function showTable(num) {
num -=1;
if (num < 0) num = tblsz - 1;
if (num >= tblsz) num = 0;
for (i=0;i<tblsz;i++) {var d = findDOM(tbl[i],1);if (i != num) d.visibility = 'hidden';
else d.visibility = 'visible';}
lastnum = num+1;
return false;

The above code uses the Document Object Model detection code.

There is only one spot where you need to make changes to this javascript code in order to include as many alternate entries as you like in the dropdown list and that is to update the list of ids in the tbl array to match the ids attached to the alternate content (which you of course also need to add). Of course there can be as much content in each table as you require but the page will look best when all of the tables are the same size (you may need to alter the content of the outer table from &nbsp; to perhaps several empty paragraphs or whatever is easiest to leave enough space for where the tables are to appear, alternatively you may wish to have the first table visible to start with as I have done on this page).


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow