Drop Down Lists

**Chris_SE** · Mar 18th, 2001, 01:57 PM

Say I have 3 select boxes with the same values. If I select a value in one of them, is there a value to remove the value from all of the others? And to replace it to the others if the value is changed??

**Mark Sreeves** · Mar 18th, 2001, 05:20 PM

Can you er.. re-phrase the question please?

**Chris_SE** · Mar 18th, 2001, 05:54 PM

Sorry I guess I was a bit incoherant(tired ^_^)
Basicly heres the question:
I have 3 select boxes with the same values
I want it so that if I choose a value from one box, it is removed from the other boxes. And if someone changes the value, the old value is restored to the other boxes.
I could do this on the server side with PHP, but that would require TONS of code. Any ideas?

**Mark Sreeves** · Mar 19th, 2001, 05:59 AM

OK, here's my first attempt

Code:

<HTML>
<HEAD>
<script language="JavaScript"><!--
var regions = new Array("Bangor","Barnstaple","Barrow-in-Furness","Birmingham","Bolton","Boston","Bournemouth","Brighton","Bristol");

////////////////////////////////////////////////////////////////////////
function z(txt,i)
{
	var j = 0
	var k = 0
	var l = -1

	for(j=0;j<3;j++)
	{
		if(j!=i)
		{
			l = -1
			document.frm1.s1[j].options.length = 0; 
		
			for (k=0;k<regions.length;k++) 
			{
				if(regions[k] != txt)
				{
					l++
					document.frm1.s1[j].options.length = l
					document.frm1.s1[j].options[l] = new Option(regions[k]);
				}
			}
		 
			document.frm1.s1[j].selectedIndex=0
		
		}
	}
}


//--></script>


<TITLE></TITLE>
</HEAD>
<BODY onLoad="z('',0);z('',1);z('',2);">
<form name=frm1>
<select name=s1 onClick="z(this.options[this.selectedIndex].text,0)">

</select>
<select name=s1 onClick="z(this.options[this.selectedIndex].text,1)">

</select>
<select name=s1 onClick="z(this.options[this.selectedIndex].text,2)">

</select>


</body>
</html>

how dows this need changing?

**Chris_SE** · Mar 19th, 2001, 01:54 PM

It doesn't load the select options. If I add them with HTML, my boxes don't change their input when a value is selected. Unfortunately I don't know javascript form objects very well. I use PHP and only slight javascript for window actions. Especially since PHP handles cookies and form data so well. Could you tell me how to add or remove a value from a <select> box? If i have those functions I'm sure I could write it.
Thanks ^_^

**Mark Sreeves** · Mar 20th, 2001, 03:40 AM

you can add and remove otions easily enough but you'll need to keep a list of the originail contents so you can add them back in again. That is why I used a Javascript array rarther than hard coded HTML

this code came from http://developer.irt.org/script/1730.htm

Code:

<html> <head> <script language="JavaScript"><!--
function removeOptionsByText(selectName, text) {
  for (var i=selectName.options.length-1; i>=0; i--) {
    if (selectName.options[i].text == text) {
      selectName.options[i] = null;
    }
  }
} function removeOptionsByValue(selectName, value) {
  for (var i=selectName.options.length-1; i>=0; i--) {
    if (selectName.options[i].value == value) {
      selectName.options[i] = null;
    }
  }
}
//--></script> </head> <body> <form> <select name="selectName">
<option value="fine">test
<option value="test">leave this alone
<option value="okay">test
<option value="xyz">test
<option value="test">okay
<option value="123">test
</select> <input type="button" value="remove" onClick="removeOptionsByText(this.form.selectName,'test')">
<input type="button" value="remove" onClick="removeOptionsByValue(this.form.selectName,'test')">
</form> </body> </html>

**Chris_SE** · Mar 20th, 2001, 06:52 PM

But that doesnt work when you change the drag select does it(im such a pain in the ass)

Thread: Drop Down Lists

Thread Tools

Display

heh

Hmm didn't work

Hmmm

Posting Permissions