Controlling multiple drop down selects

**cluelessphp** · Jul 31, 2007, 08:45

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.

**Logic Ali** · Jul 31, 2007, 15:57

Originally Posted by cluelessphp

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?

**cluelessphp** · Jul 31, 2007, 19:44

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?

**Logic Ali** · Jul 31, 2007, 20:08

Originally Posted by cluelessphp

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?

**Logic Ali** · Jul 31, 2007, 20:52

Proof of 'concept'

**cluelessphp** · Jul 31, 2007, 21:08

Truly awesome!

I love your choice of wording for the drop downs!

**markusmad** · Jul 31, 2007, 20:12

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>

**Logic Ali** · Jul 31, 2007, 20:27

Originally Posted by markusmad

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.

**markusmad** · Jul 31, 2007, 20:26

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>

**markusmad** · Jul 31, 2007, 20:35

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

.

**markusmad** · Jul 31, 2007, 22:05

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.

**cluelessphp** · Aug 1, 2007, 20:26

Your names were pretty good but I was talking to logic

**markusmad** · Aug 2, 2007, 09:32

Oh LOL, thought you were making fun of the pig and cow...

The SitePoint Forums have moved.

User Tag List

Thread: Controlling multiple drop down selects

Thread Tools

Display

Hybrid View

Controlling multiple drop down selects

Bookmarks

Bookmarks

Posting Permissions