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 Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

two dependent comboboxes. 2

Status
Not open for further replies.
travisbrown

travisbrown

Technical User
Dec 31, 2001
1,016
0
0
Does anyone have any code for two dependent combo boxes? I've managed a single dependent combo before.

Will look like this Courses>>Classes>>Sessions

I'll be populating them through an ASP loop.
 
Sort by date Sort by votes
Well, I thought I looked hard enough. I see in the FAQ and posts a few refernces to one dependent listbox, but not two. What keywords are you using, as my searches appear ineffective.

thanks
 
Upvote 0 Downvote
the most ideal way to perform this action is to have each of the first two select boxes submit the page whenever they're changed (using the onload event).

then, on the server side (asp, php, what-have-you), you'll parse the values from the fields, and, based on the values, you'll redisplay the same page with the necessary data.

that is the easiest way.

the other way is to get everything from the database on the initial loading of the page, and fill JavaScript multi-dimensional arrays that will be driven by the user changing a selection in the list box.

again, i suggest doing this server-side, because it's a) neater, b) cross-browser functional, and c) operable even if JavaScript has been disabled.

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
here's a quick and dirty example (copy/paste into a new page to test the functionality)
Code: 
<script language=javascript>

var arr = new Array();
arr[0] = new Array();
arr[1] = new Array();
arr[0][0] = new Array("a", "e", "i", "o", "u", "sometimes y");
arr[0][1] = new Array("b", "c", "d", "f", "g", "h", "j", "k", "l", "m", "n", "p", "q", "r", "s", "t", "v", "w", "x", "y", "z");
arr[1][0] = new Array("2", "4", "6", "8", "10");
arr[1][1] = new Array("1", "3", "5", "7", "9");

function changeFirst(obj1, obj2) {
   obj2.options.length = 0;
   if (obj1.selectedIndex == 0) {
      obj2.options[obj2.options.length] = new Option("vowels", "vowels");
      obj2.options[obj2.options.length] = new Option("consonants", "consonants");
   }
   else {
      obj2.options[obj2.options.length] = new Option("evens", "evens");
      obj2.options[obj2.options.length] = new Option("odds", "odds");
   }
   changeSecond(obj1, obj2, document.forms["blahForm"].elements["third"]);
}

function changeSecond(obj1, obj2, obj3) {
   obj3.options.length = 0;
   select1 = document.forms["blahForm"].elements["first"].selectedIndex;
   select2 = obj2.selectedIndex;
   for (i = 0; i < arr[select1][select2].length; i++) {
      obj3.options[obj3.options.length] = new Option(arr[select1][select2][i], arr[select1][select2][i]);
   }
}

</script>
<body onload='changeFirst(document.forms["blahForm"].elements["first"], document.forms["blahForm"].elements["second"]);'>
<form name=blahForm>
<select name=first onchange='changeFirst(this, document.forms["blahForm"].elements["second"])'>
<option>Letters</option>
<option>Numbers</option>
</select>
<select name=second onchange='changeSecond(document.forms["blahForm"].elements["first"], this, document.forms["blahForm"].elements["third"])'></select>
<select name=third></select>
</form>
</body>

-kaht

Do the chickens have large talons?
 
Upvote 0 Downvote
Thanks guys.

I've already got it working with serverside processing. I was trying to not have to submit and save the form if the user makes a change to the combo boxes. Right now if they change any of the comboboxes, their form input is lost.

For both of you, I caught you a delicious bass.

And stars.
 
Upvote 0 Downvote

Hehe - I know you've solved it, but I'll post this anyway as I worked on it ;o)

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		var courseData = [];
		courseData[courseData.length] = { idToMatch: '*', value: '0', name: 'Cookery' };
		courseData[courseData.length] = { idToMatch: '*', value: '1', name: 'Gardening' };
		courseData[courseData.length] = { idToMatch: '*', value: '2', name: 'Massage' };

		var classData = [];
		classData[classData.length] = { idToMatch: '0', value: '0', name: 'Cooking meat' };
		classData[classData.length] = { idToMatch: '0', value: '1', name: 'Cooking vegetables' };
		classData[classData.length] = { idToMatch: '0', value: '2', name: 'Cooking the books' };
		classData[classData.length] = { idToMatch: '1', value: '3', name: 'Gardening for beginners' };
		classData[classData.length] = { idToMatch: '1', value: '4', name: 'Indoor gardening' };
		classData[classData.length] = { idToMatch: '2', value: '5', name: 'Thai massage' };

		var sessionData = [];
		sessionData[sessionData.length] = { idToMatch: '0', value: '0', name: 'Session A' };
		sessionData[sessionData.length] = { idToMatch: '1', value: '1', name: 'Session A' };
		sessionData[sessionData.length] = { idToMatch: '1', value: '2', name: 'Session B' };
		sessionData[sessionData.length] = { idToMatch: '2', value: '3', name: 'Session A' };
		sessionData[sessionData.length] = { idToMatch: '2', value: '4', name: 'Session B' };

		function populateSelectBoxes() {
			populateSelectBox('courseData');
		}

		function populateSelectBox(selBoxName, idToMatch) {
			var selObj = document.forms['myForm'].elements[selBoxName];
			while (selObj.length) selObj.remove(0);
			for (var loop=0; loop<window[selBoxName].length; loop++) {
				if (window[selBoxName][loop].idToMatch == '*' || idToMatch == window[selBoxName][loop].idToMatch) {
					selObj.add(new Option(window[selBoxName][loop].name, window[selBoxName][loop].value));
				}
			}

			// if no options available, insert "no items available" item
			if (selObj.options.length == 0) selObj.add(new Option('No items available', ''));

			// select first item
			selObj.selectedIndex = 0;
			selectChanged(selBoxName, selObj.options[0].value);
		}

		function selectChanged(selBoxName, idToMatch) {
			if (selBoxName == 'courseData') {
				populateSelectBox('classData', idToMatch);
			} else if (selBoxName == 'classData') {
				populateSelectBox('sessionData', idToMatch);
			}
		}
	//-->
	</script>
</head>

<body onload="populateSelectBoxes();">
	<form name="myForm">
		<select name="courseData" onchange="selectChanged(this.name, this.value);"></select>
		<select name="classData" onchange="selectChanged(this.name, this.value);"></select>
		<select name="sessionData"></select>
	</form>
</body>
</html>

The select names have to be the same as for the arrays that their data is held in, but this should never pose a problem.

Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
Thanks for the delicious bass, uncle Rico's been eating all the steak.

-kaht

Do the chickens have large talons?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tshad
  • Locked
  • Question
Blur events going to two textboxes
Replies
2
Views
53
tshad
tshad
aspire011
  • Locked
  • Question
adding values from two separate functions in javascript
Replies
4
Views
34
aspire011
aspire011
MikeM2468
  • Locked
  • Question
Applying two functions to one select box 1
Replies
6
Views
21
vacunita
vacunita
MrCBofBCinTX
  • Locked
  • Question
Is there a way to shorten this set of controls for two select lists?
Replies
6
Views
30
MrCBofBCinTX
MrCBofBCinTX
dark2
  • Locked
  • Question
Sum two vaues in a form
Replies
2
Views
16
dark2
dark2

Part and Inventory Search

Sponsor

Back
Top