0

Can anyone help. Im trying to create 2 drop down lists (using the select tag). Based on the choice of the first drop down list the second list is populated.

Thanks,

4
Contributors
4
Replies
5
Views
6 Years
Discussion Span
Last Post by felix001
0

You need to generate a piece of dynamic html - ie. produced on the fly, often referred to as AJAX.

The first <select> needs an OnChange property, which calls a JavaScript function,
which, in turn, performs am HTML "GET" to call another script on your server,
which returns data to make up the contents of the next <select>,
which must reside inside a DIV of its own, so you can replace its innerHTML.

Look up getHTTPObject for starters.

This instantiates an HTTP object, with which you
"open" the "GET" on your remote script,
"send" to obtain the response, and
define an "onreadystatechange" property to call another function to do stuff with your result... when it gets back to you.

Its not as hard as it sounds. Debugging a mistake; now that's hard - and can take you hours !

Some notes. I use "document.getElementById" to obtain existing data from the form that <select> resides in - to send parameters to my remote script.
Also, if I need to populate more than 1 DIV with my resulting data, I concatenate each part with a pipe ("|"), and then "split" it in my statechange function into an array and populate each DIV (hard coded names) with subsequent array elements.

Bit terse, but I hope that helps.
~NZS.

0

Thanks all.

Being that Im only just starting to learn php (and python) AJAX, JS all seems a bit daunting.

I have, however, come across the following code which is (pretty much) what Im looking for.
The only thing is, is that I need to add an additional 2 drop lists which are populated based on the select of the "Platform" list.

The code I have so far is :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
	<title>TEST</title>
	<style type="text/css">
    </style>
	<script type="text/javascript">
		function populate(o)
		{
			d=document.getElementById('de');
			if(!d){return;}			
			var mitems=new Array();
			mitems['Example1']=['Type1a','Type1b'];
			mitems['Example2']=['Type2a','Type2b'];
			d.options.length=0;
			cur=mitems[o.options[o.selectedIndex].value];
			if(!cur){return;}
			d.options.length=cur.length;
			for(var i=0;i<cur.length;i++)
			{
				d.options[i].text=cur[i];
				d.options[i].value=cur[i];
			}
		}
    </script>
</head>
<body>
<form action="" method="get">
	<label for="or">Vendor </label>

	<select name="or" id="or" onchange="populate(this)">
		<option value="Example1">Example1</option>
		<option value="Example2">Example2</option>
	</select>

	<label for="de">Platform </label>
	<select name="de" id="de">
	</select>
	
        <label for="de">Type 1 </label>
	<select name="de" id="de">
	</select>

        <label for="de">Type 2 </label>
	<select name="de" id="de">
	</select>

<input type="submit" value="Show me" />
</form>
<p>No Output..</p> 
</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.