...

View Full Version : 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:-


<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
I hope this is not homework! Here you are:-


<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 :D

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
This is not Homework lol, I just used it as example of what I want so you can understand me easier :D

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
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/script2/triplecombo.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.php?p=1290817&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
Try

http://www.javascriptkit.com/script/script2/triplecombo.shtml

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum