Jump to content

[SOLVED] Basic: Dynamic / Dependant Drop Down (no sql involved)


webmaster1

Recommended Posts

Hi All,

 

I need to create a two dropdowns where the results of the second are dependant on the selection of the first.

 

I don't even need to dynamically load the options from sql since they will not be changing.

 

Can I do with PHP alone? I'd apreciate any layman links.

 

I've tried javascript examples but all of them are causing problems when I integrate them into my page for some reason.

 

 

 

 

If you want to have dropdown#2 change based on dropdown#1, you have to have alternate lists or at least alternate list id's stored somewhere, be it flatfile, database or hardcoded inot your script. 

 

If you want to do it with only php, no sql etc.., you're going to have to select something from dropdown#1 and hit a submit button of some kind and have the whole page refresh, with the lists hardcoded as arrays in your script.  PHP will not dynamically change dropdown#2 in "real-time" before form submit.  It's a server-side language, and the form is on the client.

Thats good to know. Based on that I guess PHP alone wont work since I need the form to submit itself rather than reload on submit. I think I spotted where I was going wrong with the javascipt. I had a form within a form by mistake. Will post back shortly to confirm.

I've got the javascript working. I'll post it here for anyone else since it leverages php form functionality:

 

<html>
<head>
<script type="text/javascript">

function setOptions(chosen) {
var selbox = document.myform.opttwo;

selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select a primary result first',' ');

}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new
Option('first choice - option one','oneone');
  selbox.options[selbox.options.length] = new
Option('first choice - option two','onetwo');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new
Option('second choice - option one','twoone');
  selbox.options[selbox.options.length] = new
Option('second choice - option two','twotwo');
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new
Option('third choice - option one','threeone');
  selbox.options[selbox.options.length] = new
Option('third choice - option two','threetwo');
}
}

</script>
</head>
<body><form name="myform" id="myform">
<select name="optone" size="1" onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
<option value=" " selected="selected"> Primary Results </option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select><br> <br>
</form></body>
</html>

<select name="opttwo" size="1">
<option value=" " selected="selected"> Secondary Results </option>
</select>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.