SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    Non-Member
    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.

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cluelessphp View Post
    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.
    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.

  3. #3
    Non-Member
    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?

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cluelessphp View Post
    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?
    Certainly it's possible - I just can't quite see the point of it. If they're all going to be unconditionally synchronised, why not just have one?
    Tab-indentation is a crime against humanity.

  5. #5
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tab-indentation is a crime against humanity.

  6. #6
    Non-Member
    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!

  7. #7
    SitePoint Enthusiast
    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>
    Mark A. Drake
    - Mark A. Drake
    - OnSlaught

  8. #8
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markusmad View Post
    Just having some fun tonight testing scripts... lol.

    Code:
    	if (id = 'select') 
    ..........
    
    	} else if (id = 'select2')
    I don't think you meant to do that.
    Tab-indentation is a crime against humanity.

  9. #9
    SitePoint Enthusiast
    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>
    Mark A. Drake
    - Mark A. Drake
    - OnSlaught

  10. #10
    SitePoint Enthusiast
    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 .
    Mark A. Drake
    - Mark A. Drake
    - OnSlaught

  11. #11
    SitePoint Enthusiast
    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.
    Mark A. Drake
    - Mark A. Drake
    - OnSlaught

  12. #12
    Non-Member
    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

  13. #13
    SitePoint Enthusiast
    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...
    Mark A. Drake
    - Mark A. Drake
    - OnSlaught


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •