SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
Hybrid View
-
Jul 31, 2007, 08:45 #1
- Join Date
- Feb 2006
- Posts
- 294
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Controlling multiple drop down selects
Is there a way to control the selection in a drop down menu with javascript? What I am looking to accomplish is; if I have multiple drop down menus and I change one, I want all of the others on that page to jump to the same option.
-
Jul 31, 2007, 15:57 #2
- Join Date
- Sep 2006
- Posts
- 731
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Such a script could be commissioned, but you need to clarify a couple of points.
When you say "one", presumably you mean a single designated master select that the others follow when it changes, but otherwise behave normally.
Technically select boxes should be contained within forms, so do you want to restrict the operation to one form or multiple forms?Tab-indentation is a crime against humanity.
-
Jul 31, 2007, 19:44 #3
- Join Date
- Feb 2006
- Posts
- 294
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Actually I dont want one master drop down....I want to be able to change any drop down menu and have the others follow suit. Is this even possible?
-
Jul 31, 2007, 20:08 #4
- Join Date
- Sep 2006
- Posts
- 731
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Jul 31, 2007, 20:52 #5
- Join Date
- Sep 2006
- Posts
- 731
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Tab-indentation is a crime against humanity.
-
Jul 31, 2007, 21:08 #6
- Join Date
- Feb 2006
- Posts
- 294
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Truly awesome!
I love your choice of wording for the drop downs!
-
Jul 31, 2007, 20:12 #7
- Join Date
- Jul 2007
- Location
- Virginia
- Posts
- 87
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just having some fun tonight testing scripts... lol.
Code:<html> <head> <title>test</title> <script language="javascript" type="text/javascript"> function update_menues(id){ var i; var menu, menu2; if (id = 'select') { menu = form.select; menu2 = form.select2; i = menu.selectedIndex; menu2.options[i].selected = true; } else if (id = 'select2') { menu = form.select2; menu2 = form.select; i = menu.selectedIndex; menu2.options[i].selected = true; } } </script> </head> <body> <form name="form" method="post" action=""> <select name="select" id="select" onChange="update_menues('select')"> <option>this is option 1</option> <option>this is option 2</option> <option>this is option 3</option> </select> <select name="select2" id="select2" onChange="update_menues('select2')"> <option>this is option 1</option> <option>this is option 2</option> <option>this is option 3</option> </select> </form> </div> </body> </html>
-
Jul 31, 2007, 20:27 #8
- Join Date
- Sep 2006
- Posts
- 731
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Jul 31, 2007, 20:26 #9
- Join Date
- Jul 2007
- Location
- Virginia
- Posts
- 87
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Here is the same script doing it by the value instead of the index.
Code:<html> <head> <title>test</title> <script language="javascript" type="text/javascript"> function update_menues(id){ var i; var menu, menu2; if (id = 'select') { menu = form.select; menu2 = form.select2; i = menu.value; i = loop(i, menu2); menu2.options[i].selected = true; } else if (id = 'select2') { menu = form.select2; menu2 = form.select; loop(value, menu2); i = menu.value; i = loop(i, menu2); menu2.options[i].selected = true; } } function loop(value, menu2){ for (i = 0; i < 50; i++) { if(menu2.options[i].value == value) return i; } } </script> </head> <body> <form name="form" method="post" action=""> <select name="select" id="select" onChange="update_menues('select')"> <option>cow</option> <option>pig</option> <option>dog</option> </select> <select name="select2" id="select2" onChange="update_menues('select2')"> <option>pig</option> <option>dog</option> <option>cow</option> </select> </form> </div> </body> </html>
-
Jul 31, 2007, 20:35 #10
- Join Date
- Jul 2007
- Location
- Virginia
- Posts
- 87
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
To be completely honest I couldn't figure out how to use the variable within the calls. It would try to refer to a select box named id instead of pointing to the select box named the same as the variable 'id'. AKA no javascript pro here
.
-
Jul 31, 2007, 22:05 #11
- Join Date
- Jul 2007
- Location
- Virginia
- Posts
- 87
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
lol, I'm a simple man - plus I wanted to illustrate that the names of animals are somewhere in the other select box but not in the same order lol.
-
Aug 1, 2007, 20:26 #12
- Join Date
- Feb 2006
- Posts
- 294
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Your names were pretty good but I was talking to logic
-
Aug 2, 2007, 09:32 #13
- Join Date
- Jul 2007
- Location
- Virginia
- Posts
- 87
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Oh LOL, thought you were making fun of the pig and cow...
Bookmarks