Change [Select 2] options when [Select 1] option is changed

topdown.me · 11-10-2012, 12:00 PM

Hello.
I have 2 selects in a form:
Select 1
-food
-drinks
Select 2
-hamburger
-cheetos
-orange juice
-cola

I want to do that when I choose "FOOD" in select 1, I get the options: Hamburger and cheetos, and when I pick "DRINKS" in select 1,
select 2 will change to orngae juice and cola.

How I can do that? (need to work in all browsers)

Philip M · 11-10-2012, 12:33 PM

I hope this is not homework! Here you are:-

Code:

<html>
<head>

<script type = "text/javascript">

function setOptions(chosen) {
var selbox = document.getElementById("myform").opttwo;
 
selbox.options.length = 0;
if (chosen == "0") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
}

if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('Hamburger     ','Hamburger');
selbox.options[selbox.options.length] = new Option('Cheetos','Cheetos');
}

if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('Orange Juice     ','Orange Juice');
selbox.options[selbox.options.length] = new Option('Cola','Cola');
}

}

</script>

</head>
<body>

<form id="myform">

<select name="optone" 
onchange="setOptions(document.getElementById('optone').selectedIndex);">
<option value="0" selected="selected"> Please Select </option>
<option value="1"> Food </option>
<option value="2"> Drink </option>
</select>
<br> <br>
<select name="opttwo">
<option value=" " selected="selected">Please select one of the options above first</option>
</select>
<br><br>
<input type="button" name="go" value="Click To Alert Value Selected" onclick="alert(document.getElementById('myform').opttwo.value)">

</form> 

</body>
</html>

"I have not failed. I've just found 10,000 ways that won't work. " - Thomas Edison

topdown.me · 11-10-2012, 12:43 PM

Quote:

Originally Posted by Philip M

I hope this is not homework! Here you are:-

Code:

<html>
<head>

<script type = "text/javascript">

function setOptions(chosen) {
var selbox = document.myform.opttwo;
 
selbox.options.length = 0;
if (chosen == "0") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
}

if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('Hamburger     ','Hamburger');
selbox.options[selbox.options.length] = new Option('Cheetos','Cheetos');
}

if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('Orange Juice     ','Orange Jiuce');
selbox.options[selbox.options.length] = new Option('Cola','Cola');
}

}

</script>

</head>
<body>

<form name="myform">

<select name="optone" 
onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
<option value="0" selected="selected"> Please Select </option>
<option value="1"> Food </option>
<option value="2"> Drink </option>
</select>
<br> <br>
<select name="opttwo">
<option value=" " selected="selected">Please select one of the options above first</option>
</select>
<br><br>
<input type="button" name="go" value="Click To Alert Value Selected" onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);">

</form> 

</body>
</html>

"I have not failed. I've just found 10,000 ways that won't work. " - Thomas Edison

This is not Homework lol, I just used it as example of what I want so you can understand me easier

btw, its not helping me since I need to use PHP to loop all my options, wich is impossible to use in a javascript script.
Help?

Philip M · 11-10-2012, 12:50 PM

Quote:

Originally Posted by topdown.me

This is not Homework lol, I just used it as example of what I want so you can understand me easier

btw, its not helping me since I need to use PHP to loop all my options, wich is impossible to use in a javascript script.
Help?

Oh, sorry I spoke! I don't know much about PHP.

topdown.me · 11-10-2012, 07:13 PM

Need help here.
Something that can be good for me too:
When an option is chosen in Select 1, Select 2 shows up. when another option, Select 3 shows up, etc..
Easier?

Philip M · 11-10-2012, 09:15 PM

Quote:

Originally Posted by topdown.me

Need help here.
Something that can be good for me too:
When an option is chosen in Select 1, Select 2 shows up. when another option, Select 3 shows up, etc..
Easier?

Try

http://www.javascriptkit.com/script/...plecombo.shtml

minder · 11-11-2012, 02:28 AM

The op has x-posted in another thread.

You said it needs to work in all browsers, so you can't use javascript because it won't work in browsers that do not support javascript or have it disabled for some reason.

If you want to guarantee it to work in all browsers then have a look at a starting point php solution in your other thread on this topic

http://www.codingforums.com/showpost...17&postcount=7

If it doesn't have to work in all browsers, then by all means use javascript

topdown.me · 11-11-2012, 08:02 AM

Quote:

Originally Posted by Philip M

Try

http://www.javascriptkit.com/script/...plecombo.shtml

Thank you, should be good.
Edit: no, its not good.. I cant loop my options.. \: