Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

hi, I try to switch value for ea

Status
Not open for further replies.
antonyb

antonyb

MIS
Aug 23, 2002
35
0
0
MY
hi,

I try to switch value for each lisbox, having some problem here.

for example :

I have 5 listbox each listbox have the same value like
1. <select name=&quot;all&quot;>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

2. <select name=&quot;all&quot;>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

3. <select name=&quot;all&quot;>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

4. <select name=&quot;all&quot;>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

5. <select name=&quot;all&quot;>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

when i select the first listbox and option 1 is selected.
The second, third, four and fifth listbox will be change to like this :

<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>

The option 1 will be disappear and when i switch back to the
first listbox and select option 2, others listbox will be change back to like this

<option>1</option>
<option>3</option>
<option>4</option>
<option>5</option>

option 2 will be disappear and then when i select option 3 on listbox 2, others listbox will be change to

<option>1</option>
<option>2</option>
<option>4</option>
<option>5</option>

and continue......

Your help is much appreciated. Thank you very much.

Rgds,
kk
 
Sort by date Sort by votes
There has to be a cleaner way, but at least this one seems to work. Notice I surrounded the drop downs with the <form> tag and gave each option a value(same as its text). Also, having &quot;all&quot; for an element name is probably not a good idea, &quot;all&quot; is a keyword(at least, in IE). I gave your controls name &quot;lst&quot;.
Code: 
<head>
function changeOptions(mainList){
 var selValue = mainList.options[mainList.selectedIndex].value;		
 for(i=1;i<document.frm.lst.length;i++){
  fillList(document.frm.lst[i], selValue);
 }
}

function fillList(objList, valueToExclude){
 for(j=objList.length;j>0;j--){			
  objList.remove(0);
 }	
 for(k=1;k<6;k++){
  if(k != valueToExclude){
   var o = document.createElement(&quot;OPTION&quot;);
   o.text = k;
   o.value= k;
   objList.options.add(o);
  }
 }
}
</head>
<body>
 <form name=&quot;frm&quot;>
  <select name=&quot;lst&quot; onchange=&quot;javascript:changeOptions(this)&quot;>
   <option value=1>1</option>
   <option value=2>2</option>
   <option value=3>3</option>
   <option value=4>4</option>
   <option value=5>5</option>
  </select>
 <br>
  <select name=&quot;lst&quot;>
   <option value=1>1</option>
   <option value=2>2</option>
   <option value=3>3</option>
   <option value=4>4</option>
   <option value=5>5</option>
  </select>
 <br>
 <select name=&quot;lst&quot;>
   <option value=1>1</option>
   <option value=2>2</option>
   <option value=3>3</option>
   <option value=4>4</option>
   <option value=5>5</option>
 </select>
 <br>
 <select name=&quot;lst&quot;>
   <option value=1>1</option>
   <option value=2>2</option>
   <option value=3>3</option>
   <option value=4>4</option>
   <option value=5>5</option>n>
 </select>
 <br>
 <select name=&quot;lst&quot;>
   <option value=1>1</option>
   <option value=2>2</option>
   <option value=3>3</option>
   <option value=4>4</option>
   <option value=5>5</option>
 </select>
</form>
</body>
 
Upvote 0 Downvote
Thanks LV for your answer. How about, if i choose option value 1 or 2 or 3 or 4 or 5 on each listbox other listbox will change their value accordingly... not only listbox 1 can control other listboxs but listbox 2, listbox 3, listbox 4 and listbox 5 also can do that. for example:

select value 1 on listbox 2 other listboxs 1, 3,4 and 5 will be like that


listbox1

<select name=&quot;lst&quot;>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>

listbox3

<select name=&quot;lst&quot;>

<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>

listbox4

<select name=&quot;lst&quot;>

<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>

listbox5

<select name=&quot;lst&quot;>

<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>

and then select value 2 on listbox 3 other listboxs 1, 2, 4 and 5 will be like that

listbox1

<select name=&quot;lst&quot;>
<option value=2>1</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>

listbox2

<select name=&quot;lst&quot;>

<option value=2>1</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>

listbox4

<select name=&quot;lst&quot;>

<option value=2>1</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>

listbox5

<select name=&quot;lst&quot;>

<option value=2>1</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>


and so on....

each listbox can link each other as well, not only listbox 1 can do it. It can multiple on change.








 
Upvote 0 Downvote
Antony,

I've modified LVs code to do what you desire:

Code: 
<HTML>
<HEAD>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
function changeOptions(selectBox, value)
{
	for (selectBoxLoop=1; selectBoxLoop<6; selectBoxLoop++)
	{
		if (selectBoxLoop == selectBox) continue;
		fillList(document.getElementById('selectBox' + selectBoxLoop), value);
	}
}

function fillList(selectBoxObject, valueToExclude)
{
	for(j=selectBoxObject.length; j>0; j--) selectBoxObject.remove(0);
	for(k=1; k<6; k++)
	{
		if(k != valueToExclude)
		{
			var o = document.createElement(&quot;OPTION&quot;);
			o.text = k;
			o.value= k;
			selectBoxObject.options.add(o);
		}
	}
}
//-->
</SCRIPT>
</HEAD>
<BODY>

<FORM NAME=&quot;myForm&quot;>
	<SELECT ID=&quot;selectBox1&quot; onChange=&quot;changeOptions(1, this.value);&quot;>
		<OPTION VALUE=&quot;1&quot;>1</OPTION>
		<OPTION VALUE=&quot;2&quot;>2</OPTION>
		<OPTION VALUE=&quot;3&quot;>3</OPTION>
		<OPTION VALUE=&quot;4&quot;>4</OPTION>
		<OPTION VALUE=&quot;5&quot;>5</OPTION>
	</SELECT>
	<BR>
	<SELECT ID=&quot;selectBox2&quot; onChange=&quot;changeOptions(2, this.value);&quot;>
		<OPTION VALUE=&quot;1&quot;>1</OPTION>
		<OPTION VALUE=&quot;2&quot;>2</OPTION>
		<OPTION VALUE=&quot;3&quot;>3</OPTION>
		<OPTION VALUE=&quot;4&quot;>4</OPTION>
		<OPTION VALUE=&quot;5&quot;>5</OPTION>
	</SELECT>
	<BR>
	<SELECT ID=&quot;selectBox3&quot; onChange=&quot;changeOptions(3, this.value);&quot;>
		<OPTION VALUE=&quot;1&quot;>1</OPTION>
		<OPTION VALUE=&quot;2&quot;>2</OPTION>
		<OPTION VALUE=&quot;3&quot;>3</OPTION>
		<OPTION VALUE=&quot;4&quot;>4</OPTION>
		<OPTION VALUE=&quot;5&quot;>5</OPTION>
	</SELECT>
	<BR>
	<SELECT ID=&quot;selectBox4&quot; onChange=&quot;changeOptions(4, this.value);&quot;>
		<OPTION VALUE=&quot;1&quot;>1</OPTION>
		<OPTION VALUE=&quot;2&quot;>2</OPTION>
		<OPTION VALUE=&quot;3&quot;>3</OPTION>
		<OPTION VALUE=&quot;4&quot;>4</OPTION>
		<OPTION VALUE=&quot;5&quot;>5</OPTION>
	</SELECT>
	<BR>
	<SELECT ID=&quot;selectBox5&quot; onChange=&quot;changeOptions(5, this.value);&quot;>
		<OPTION VALUE=&quot;1&quot;>1</OPTION>
		<OPTION VALUE=&quot;2&quot;>2</OPTION>
		<OPTION VALUE=&quot;3&quot;>3</OPTION>
		<OPTION VALUE=&quot;4&quot;>4</OPTION>
		<OPTION VALUE=&quot;5&quot;>5</OPTION>
	</SELECT>
</FORM>

</BODY>
</HTML>

Hope this helps!

Dan
 
Upvote 0 Downvote
This is what i want, thanks LV. But if value can remain when it was selected on each listbox should be perfectly.

for example:

Listbox1
When selected value 3, value 3 will be showing on listbox1

Listbox2
When selected value 2, value 2 will be showing on listbox2
and then value on listbox1 will not effected still remain as value 3, same as other as well.

so, i mean that the value already selected will be remain on listbox it will not refresh to value 1

 
Upvote 0 Downvote
antony,

Try this:

Code: 
<HTML>
<HEAD>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
function changeOptions(selectBox, value)
{
	for (var selectBoxLoop=1; selectBoxLoop<6; selectBoxLoop++)
	{
		if (selectBoxLoop == selectBox) continue;
		fillList(document.getElementById('selectBox' + selectBoxLoop), value);
	}
}

function fillList(selectBoxObject, valueToExclude)
{
	// remeber previously selected value
	selectBoxSelection = selectBoxObject.options[selectBoxObject.selectedIndex].value;
	
	while (selectBoxObject.length > 0) selectBoxObject.remove(0);
	for(var valueLoop=1; valueLoop<6; valueLoop++)
	{
		if (valueLoop == valueToExclude) continue;
		var newOpt = document.createElement(&quot;OPTION&quot;);
		newOpt.text = valueLoop;
		newOpt.value = valueLoop;
		if (valueLoop == selectBoxSelection) newOpt.selected = true;
		selectBoxObject.options.add(newOpt);
	}
}
//-->
</SCRIPT>
</HEAD>
<BODY>

<FORM NAME=&quot;myForm&quot;>
	<SELECT ID=&quot;selectBox1&quot; onChange=&quot;changeOptions(1, this.value);&quot;>
		<OPTION VALUE=&quot;1&quot;>1</OPTION>
		<OPTION VALUE=&quot;2&quot;>2</OPTION>
		<OPTION VALUE=&quot;3&quot;>3</OPTION>
		<OPTION VALUE=&quot;4&quot;>4</OPTION>
		<OPTION VALUE=&quot;5&quot;>5</OPTION>
	</SELECT>
	<BR>
	<SELECT ID=&quot;selectBox2&quot; onChange=&quot;changeOptions(2, this.value);&quot;>
		<OPTION VALUE=&quot;1&quot;>1</OPTION>
		<OPTION VALUE=&quot;2&quot;>2</OPTION>
		<OPTION VALUE=&quot;3&quot;>3</OPTION>
		<OPTION VALUE=&quot;4&quot;>4</OPTION>
		<OPTION VALUE=&quot;5&quot;>5</OPTION>
	</SELECT>
	<BR>
	<SELECT ID=&quot;selectBox3&quot; onChange=&quot;changeOptions(3, this.value);&quot;>
		<OPTION VALUE=&quot;1&quot;>1</OPTION>
		<OPTION VALUE=&quot;2&quot;>2</OPTION>
		<OPTION VALUE=&quot;3&quot;>3</OPTION>
		<OPTION VALUE=&quot;4&quot;>4</OPTION>
		<OPTION VALUE=&quot;5&quot;>5</OPTION>
	</SELECT>
	<BR>
	<SELECT ID=&quot;selectBox4&quot; onChange=&quot;changeOptions(4, this.value);&quot;>
		<OPTION VALUE=&quot;1&quot;>1</OPTION>
		<OPTION VALUE=&quot;2&quot;>2</OPTION>
		<OPTION VALUE=&quot;3&quot;>3</OPTION>
		<OPTION VALUE=&quot;4&quot;>4</OPTION>
		<OPTION VALUE=&quot;5&quot;>5</OPTION>
	</SELECT>
	<BR>
	<SELECT ID=&quot;selectBox5&quot; onChange=&quot;changeOptions(5, this.value);&quot;>
		<OPTION VALUE=&quot;1&quot;>1</OPTION>
		<OPTION VALUE=&quot;2&quot;>2</OPTION>
		<OPTION VALUE=&quot;3&quot;>3</OPTION>
		<OPTION VALUE=&quot;4&quot;>4</OPTION>
		<OPTION VALUE=&quot;5&quot;>5</OPTION>
	</SELECT>
</FORM>

</BODY>
</HTML>

Hope this helps!

Dan
 
Upvote 0 Downvote
Hi BillyRayPreachersSon,

Thanks again for your coding, but i still got problem stuck at the passing value on each listboxes for example :

firstly i choose
listbox1 value1
listbox2 value2
listbox3 value3
listbox4 value4
listbox5 value5

is ok

but second i choose

listbox2 value 3

other listboxes will become like this

listbox1 value1
listbox2 value3
listbox3 value1
listbox4 value4
listbox5 value5

is wrong

suppose is like this

listbox1 value1
listbox2 value3
listbox3 value2
listbox4 value4
listbox5 value5

is correct

but it came out the duplicate number, it's possible the problem can solve?







 
Upvote 0 Downvote
I think you need to rethink (or explain better) what you're after.

The way the code stands, you can't have a value selected in, say listbox2, and then still see that value selected in listbox3, as we've just removed it (that was your original request).

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
170
Kennelbloke
Kennelbloke
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
131
Rayj0000
Rayj0000
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
150
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
179
xwb
xwb
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
119
198709km
198709km

Part and Inventory Search

Sponsor

Back
Top