/    Sign up×
Community /Pin to ProfileBookmark

dynamic div

Copy linkTweet thisAlerts:
Dec 11.2007

Hey,

What I’m trying to do is, based on a user selection from a drop down, dynamically show a div and it’s contents. This is a short version of what I’m doing so code is missing.

I have the select with the onChange

[CODE]<select id=”program” tabindex=”2″ onChange=”reveal(choice)” name=”program”>
[/CODE]

Then I have the div with the name

[CODE]<div id=”prerequisites_div”> </div>
[/CODE]

and then I have the function that handles the processing

[CODE]function reveal(chosen)
{

var n=1;
len = document.form1.program.length;
i = 0;
chosen = “none”;

for (i = 0; i < len; i++)
{
if (document.form1.program[i].selected)
{

chosen = document.form1.program[i].value

}
}
if (chosen == “BSN”)
{

prerequisites_div.innerHTML = prerequisites_div.innerHTML +

“<td align=’middle’ bgcolor=’white’ colspan=’2′>….on and on to this” + n
}
else
{
return false;
}

}
[/CODE]

Can someone help me see this through or steer in the right way to get this accomplished.

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangDec 12.2007 — Use a [I]switch[/I] statement not [I]if...else[/I]

Adding table elements must be done using DOM methods not innerHTML.
Copy linkTweet thisAlerts:
@magentaplacentaDec 12.2007 — Here's a proof of concept done in literally about 5 minutes to possibly give you an alternate idea? You can also do display:none and display:block, which I would do if I were doing this properly...

<html>

<head>

<script type="text/javascript">

function toggleDivOL( elemID )

{

var elem = document.getElementById( elemID );

if( elem.style.position != 'absolute' )

{

elem.style.position = 'absolute';

elem.style.left = '-4000px';

}

else

{

elem.style.position = 'relative';

elem.style.left = '0px';

}

}

</script>

<style type="text/css">

body {

font-family: Tahoma, sans-serif;

}

.testDiv {

width: 300px;

padding: 5px;

background-color: red;

color: #fff;

border: 1px solid #000000;

font-weight: bold;

}

</style>

<title>show/hide with select</title>

</head>

<body>

<form>

<select onchange="toggleDivOL('toHide');">

<option>show div</option>

<option>hide div</option>

</select>

</form>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nec arcu. Fusce tempus, nibh sed tincidunt

tincidunt, purus quam volutpat nunc, id rhoncus justo lorem in turpis. Phasellus interdum. Nam dui. Nulla a

metus. Suspendisse cursus vehicula lacus. Aliquam malesuada. Suspendisse sagittis elementum purus. Cras

ornare sem et est. Duis ut nunc nec mi dignissim elementum.</p>

<div id="toHide" class="testDiv">Here is the DIV we will hide. Lorem ipsum dolor sit amet, consectetuer

adipiscing elit.</div>

<p>Cras velit magna, venenatis a, posuere lobortis, dignissim sed, sem. Donec at ipsum. Mauris rhoncus.

Phasellus ornare, velit in bibendum elementum, velit erat pulvinar neque, id aliquam dolor felis id diam.

Donec nulla quam, venenatis lobortis, vestibulum nec, consequat quis, ante. Vestibulum vel quam vel nunc

viverra sodales. Mauris sed dolor. Vivamus accumsan ipsum a urna. Proin sollicitudin. Sed adipiscing.

Vestibulum elit purus, imperdiet in, eleifend sit amet, porta vitae, dui. Vivamus nec felis. Etiam vitae

metus. Donec enim justo, pharetra molestie, sollicitudin a, suscipit non, quam. In hac habitasse platea

dictumst. Nulla aliquam ante.</p>

<p>Aenean porttitor molestie felis. Nulla vulputate malesuada ligula. Pellentesque porttitor aliquam magna.

Pellentesque dolor libero, varius quis, elementum rutrum, bibendum non, turpis. Cras aliquam urna at dolor.

Duis quam. Fusce laoreet. Donec accumsan volutpat lorem. Curabitur ac massa vel ipsum facilisis faucibus.

Nam metus. Vestibulum sed risus.</p>

</body>

</html>
Copy linkTweet thisAlerts:
@LeeUDec 12.2007 — I believe what you want is being used on this page. Just take a look and study what he has done.
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...