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,
felix001 13 Junior Poster in Training
NZSnowMan 0 Newbie Poster
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.
vibhaJ 126 Master Poster
IIM commented: helpful +4
IIM 163 Master Poster
@vibha-nice code....and that too with quite well explanation...
felix001 13 Junior Poster in Training
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> Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.