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.

 

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.