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!

Dynamically Loading Combo Box Values 1

Status
Not open for further replies.
moonoo

moonoo

Programmer
May 17, 2000
62
0
0
US
Hi
I am new to Javascript . I have a combo box(Say ComboB) which i load when i display the page . But I want it do it dynamically on selection of an item in the list (say List A)on the same page . So how do i change the contents of the combo box in the changeEvent of the List Box ?
Any help will be greatly appreciated..
Regards
Dev
 
Sort by date Sort by votes

Dev,

This should get you started:

Code: 
<html>
<head>
<script language=&quot;javascript&quot;>
<!--
	var list1 = ['list 1, item 1', 'list 1, item 2', 'list 1, item 3'];
	var list2 = ['list 2, item 1', 'list 2, item 2', 'list 2, item 3'];
	var list3 = ['list 3, item 1', 'list 3, item 2', 'list 3, item 3'];

	function clearList(listObj) { while (listObj.options.length > 0) listObj.remove(0); }

	function updateComboB(listObj)
	{
		var formObj = document.forms['myForm'];
		var ComboB = formObj.ComboB;
		clearList(formObj.ComboB);

		switch (listObj.options[listObj.selectedIndex].value)
		{
			case '1': var myList = list1; break;
			case '2': var myList = list2; break;
			case '3': var myList = list3; break;
		}

		for (var loop=0; loop<myList.length; loop++)
		{
			var newOpt = document.createElement('OPTION');
			newOpt.value = loop;
			newOpt.text = myList[loop];
			formObj.ComboB.add(newOpt);
		}
	}
//-->
</script>

</head>
<body>
	<form name=&quot;myForm&quot;>
		<select name=&quot;ListA&quot; onchange=&quot;updateComboB(this);&quot;>
			<option value=&quot;1&quot;>Show list 1</option>
			<option value=&quot;2&quot;>Show list 2</option>
			<option value=&quot;3&quot;>Show list 3</option>
		</select>
		<br>
		<select name=&quot;ComboB&quot;></select>
	</form>
</body>
</html>

Hope this helps,

Dan
 
Upvote 0 Downvote
This might make it a little faster:

function clearList(listObj){listObj.length=0}

Adam
while(ignorance==true){perpetuate(violence,fear,hatred);life=life-1};
 
Upvote 0 Downvote

Adam,

Nice tip...

I've seen that syntax used only ever used a few times, so had always (and probably wrongly) assumed that it wasn't good practice.

In reality, it's perfectly legal syntax, so I'll probably adopt it from now ;o)

Thanks again!

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Adding datepicker calendar dynamically
Replies
0
Views
76
lexer
lexer
AbidingDude
  • Locked
  • Question
Dynamically Create A Table
Replies
3
Views
64
AbidingDude
AbidingDude
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
71
waubain
waubain
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
64
chikwendu
chikwendu
waubain
  • Locked
  • Question
Syntax help to create values list for table column
Replies
1
Views
62
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top