DHTML Effect...

**CasperTalos** · 02-20-2007, 03:56 PM

I'm trying to figure out how to use a drop-down box effect so when the user selects something in that drop-down box, a series of text boxes appears under it, asking the user for more data. Any way to do that??

**jscheuer1** · 02-20-2007, 04:14 PM

You could use the select's onchange event to determine which other content to reveal.

**ilensoft** · 02-20-2007, 04:15 PM

yes there is. You can do this by writing a function to get this done. Here is how the function works. The function is able to get which item of the select drop down box is clicked. Beging able to do that, you can tell the function to write a html code to a div element that could already have been put their. Make sure the div element is having an "id" or "name" attribute so that you can make reference to that HTML object and alter its innerHTML.

**jscheuer1** · 02-20-2007, 04:26 PM

See also:

http://www.dynamicdrive.com/dynamici...dependency.htm

**CasperTalos** · 02-20-2007, 05:22 PM

Originally Posted by ilensoft

yes there is. You can do this by writing a function to get this done. Here is how the function works. The function is able to get which item of the select drop down box is clicked. Beging able to do that, you can tell the function to write a html code to a div element that could already have been put their. Make sure the div element is having an "id" or "name" attribute so that you can make reference to that HTML object and alter its innerHTML.

This seems to be a start...

http://www.pageresource.com/jscript/jdrop2.htm

I just need to figure out how to make it to work for my job page

http://www.deaf-interpreter.com/request2.php

once bill-me is selected, the billing information appears

or once credit card is selected, the appropriate boxes would appear.

Any Advice?

**jscheuer1** · 02-20-2007, 06:28 PM

http://www.dynamicdrive.com/dynamici...dependency.htm

**CasperTalos** · 02-20-2007, 10:21 PM

I see radio boxes and check boxes, I just am not sure how to do this with a drop-down box...

**mburt** · 02-20-2007, 10:40 PM

Twey's script does do that... but it may seem a little complicated. Try this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function selectBox(el) {
var d_el = document.getElementById(el);
document.getElementById("mainarea").innerHTML=d_el.innerHTML;
}
</script>
</head>
<body>
<select onchange="selectBox(options[selectedIndex].value);">
	<option selected value="default">Default Option</option>
	<option value="content1">Option 1</option>
	<option value="mycontent2">Option 1</option>
</select>

<div id="default" style="display:none">
	<br>default content
</div>

<div id="content1" style="display:none">
	<input type="text">
	<br><input type="text">
	<br><input type="radio" name="test">Item 1
	<br><input type="radio" name="test">Item 2
</div>

<div id="mycontent2" style="display:none">
	Blah blah ... you get the picture
</div>

<div id="mainarea"></div>
</body>
</html>

Set the "value" of your option to your targeted content:

Code:

<option value="mycontentname">option</option>

and make sure the content actually exists:

Code:

<div id="mycontentname"...

**CasperTalos** · 02-21-2007, 05:21 PM

Looks Promising, I'll give it a try and get back on ya'll with this once I figure this out. :-D

Thread: DHTML Effect...

Thread Tools

Search Thread

DHTML Effect...

Bookmarks

Bookmarks

Posting Permissions