!!!HELP!!!Modified Chained Select!!!HELP!!!

Dev Articles Community Forums Sponsor:

September 25th, 2005, 06:03 PM

Seraphim

Registered User

Join Date: Aug 2005

Posts: 16

Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0

!!!HELP!!!Modified Chained Select!!!HELP!!!

Hello Im am looking to implement a chained select menu that will show/hide options in a second select dependant on what is selected in the first menu. esy enough so far bu heres the trick. This is not a static html page (its php) and the options change but do have fixed option values.
My implementation involves styles and colors of a garment. however not all colors are available in every style and the php page generates select menus with all the styles and colors options (and Im not experienced in PHP) , so I need to prevent a customer selecting an invalid style and color combination by hiding unavailable choices in a fixed select menu without reloading the page. I considered using multiple layered divs but that will not pass the options in the customer order.
I have seen many chained selects using option classes and many other things but I would need would be some code that states:
If option 1 is selected: show only options 6 8 10
If option 2 is selected: show only options 6 7 9
and so on.

September 25th, 2005, 06:09 PM

Seraphim

Registered User

Join Date: Aug 2005

Posts: 16

Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0

Also... the Select names and Option Values are fixed (pulled from database)
And would need to map out all the possibilities in the script

September 25th, 2005, 06:16 PM

Seraphim

Registered User

Join Date: Aug 2005

Posts: 16

Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0

Bump!Bump!Bump!

September 25th, 2005, 11:03 PM

Mittineague

Contributing User

Join Date: Jul 2005

Location: West Springfield, Massachusetts

Posts: 553

Time spent in forums: 1 Week 1 Day 9 h 1 m 33 sec
Reputation Power: 5

dynamic PHP lists

It would be very helpful if you would post the script as it is now, so that suggestions on how to modify can be made.

September 26th, 2005, 04:30 AM

Seraphim

Registered User

Join Date: Aug 2005

Posts: 16

Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0

Code

September 26th, 2005, 04:31 AM

Seraphim

Registered User

Join Date: Aug 2005

Posts: 16

Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0

Code

Code:

<style>
  .hide{
         display: none;
  }
</style>


<script type="text/javascript">
  function showHide(form){
    for(var i=0;i<document.getElementsByTagName('div').length;i++){
      if(/hide/.test(document.getElementsByTagName('div')[i].className))
         document.getElementsByTagName('div')[i].style.display = 'none';
    }

      if(document.getElementById(form['id[2]'].value+form['id[3]'].value))
         document.getElementById(form['id[2]'].value+form['id[3]'].value).style.display = 'block';
  }
</script>
<DIV style="WIDTH: 470px; POSITION: relative; HEIGHT: 532px">
<DIV id="" style="WIDTH: 470px; POSITION: absolute; TOP: 0px; LEFT: 0px; HEIGHT: 532px"><img name="na" src="images/garments/select.gif"></div>
<DIV id="10" class="hide" style="WIDTH: 470px; POSITION: absolute; TOP: 0px; LEFT: 0px; HEIGHT: 532px"><img name="10" src="images/garments/tee_white.gif"></div>
<DIV id="2610" class="hide" style="WIDTH: 470px; POSITION: absolute; TOP: 0px; LEFT: 0px; HEIGHT: 532px"><img name="1026" src="images/garments/tee_black.gif"></div>
more divs combinations...

<FORM NAME="formName"></td></tr>
<tr>
<td class="main" align="left" valign="top">Color:</td>
<td class="main" align="left" valign="top">
<select name="id[2]" onchange="showHide(this.form)">
<option value="" SELECTED>Please Select</option>
<option value="27">White</option>
<option value="26">Black</option>
<option value="49">Army</option>
<option value="29">Ash</option>
<option value="41">Asphalt</option>
</select></td></tr><tr>
<td class="main" align="left" valign="top">Size:</td>
<td class="main" align="left" valign="top">
<select name="id[1]" onchange="showHide(this.form)">
<option value="" SELECTED>Please Select</option>
<option value="1">Small</option>
<option value="2">Medium</option>
<option value="3">Large</option>
<option value="4">XLarge</option>
</select></td></tr><tr>
 <td class="main" align="left" valign="top">Style:</td>
 <td class="main" align="left" valign="top">
<select name="id[3]" onchange="showHide(this.form)">
<option value="" SELECTED>Please Select</option>
<option value="10">Tee Shirt</option>
<option value="11">Organic Vintage Tee (+$1.00)</option><option value="21">Hemp Hoodie</option>
</select></td></tr><tr><td></FORM>

September 26th, 2005, 09:16 PM

Mittineague

Contributing User

Join Date: Jul 2005

Location: West Springfield, Massachusetts

Posts: 553

Time spent in forums: 1 Week 1 Day 9 h 1 m 33 sec
Reputation Power: 5

dynamic option list

Thanks for posting the code. There's a few issues with it, but it's enough to show what you want to do. The javascript as shown has more to do with displaying the images in the divs. As for select box content that depends on previous select box selections I think this page will help you to write the script you want. http://www.mattkruse.com/javascript/dynamicoptionlist/

September 26th, 2005, 10:02 PM

Seraphim

Registered User

Join Date: Aug 2005

Posts: 16

Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0

Well the selected options will ultimately display a hidden div with the array (id) of two select lists option ids combined.
See http://forums.devarticles.com/t29781/s.html
however I dont want people to be able to select an unavailable option. I need to be able to have a script that will remove or hide certain specific options (or show only certain options) in the second selct list after the first is selected. However I cant really use Parent and Child lists becase that would require some kind of php and I cannot repopulate options such as in the 'Chain Selects' becuase it seems to mess up the php generated select lists

September 27th, 2005, 08:42 AM

MadCowDzz

I'm Internet Famous

Dev Articles Frequenter (2500 - 2999 posts)

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 14 m 9 sec
Reputation Power: 9

If everything's dependant, what would the first option a customer may choose?
Would you want them to first pick a style, then present the colour & sizes?

I was playing with the code myself, and I kind of think this may be easier without using Javascript and SELECT lists, but rather just links and some serverside code.

Is there a specific reason you've chosen Javascript?

Oh, and the code presented above doesn't work well in Firefox.

#10

September 27th, 2005, 10:06 AM

Itsacon

Command Line Warrior

Join Date: Aug 2004

Location: Sector ZZ9 Plural Z Alpha

Posts: 1,029

Folding Points: 1694514 Folding Title: Super Ultimate Folder - Level 4

Time spent in forums: 1 Week 3 h 49 m 58 sec
Reputation Power: 7

Something like this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Javascript demo page</title>

<script type="text/javascript">
<!-- 
function set_foreground(color)
{
	document.forms[0].foreground.length = 4;

	switch(color)
	{
		case '#ffffff':
			document.forms[0].foreground.options[0].value = '#ff0000';
			document.forms[0].foreground.options[0].text = 'Red';
			document.forms[0].foreground.options[1].value = '#00ff00';
			document.forms[0].foreground.options[1].text = 'Green';
			document.forms[0].foreground.options[2].value = '#0000ff';
			document.forms[0].foreground.options[2].text = 'Blue';
			document.forms[0].foreground.options[3].value = '#000000';
			document.forms[0].foreground.options[3].text = 'Black';
			break;
		case '#ff0000':
			document.forms[0].foreground.options[0].value = '#ffffff';
			document.forms[0].foreground.options[0].text = 'White';
			document.forms[0].foreground.options[1].value = '#00ff00';
			document.forms[0].foreground.options[1].text = 'Green';
			document.forms[0].foreground.options[2].value = '#0000ff';
			document.forms[0].foreground.options[2].text = 'Blue';
			document.forms[0].foreground.options[3].value = '#000000';
			document.forms[0].foreground.options[3].text = 'Black';
			break;
		case '#00ff00':
			document.forms[0].foreground.options[0].value = '#ffffff';
			document.forms[0].foreground.options[0].text = 'White';
			document.forms[0].foreground.options[1].value = '#ff0000';
			document.forms[0].foreground.options[1].text = 'Red';
			document.forms[0].foreground.options[2].value = '#0000ff';
			document.forms[0].foreground.options[2].text = 'Blue';
			document.forms[0].foreground.options[3].value = '#000000';
			document.forms[0].foreground.options[3].text = 'Black';
			break;
		case '#0000ff':
			document.forms[0].foreground.options[0].value = '#ffffff';
			document.forms[0].foreground.options[0].text = 'White';
			document.forms[0].foreground.options[1].value = '#ff0000';
			document.forms[0].foreground.options[1].text = 'Red';
			document.forms[0].foreground.options[2].value = '#00ff00';
			document.forms[0].foreground.options[2].text = 'Green';
			document.forms[0].foreground.options[3].value = '#000000';
			document.forms[0].foreground.options[3].text = 'Black';
			break;
		case '#000000':
			document.forms[0].foreground.options[0].value = '#ffffff';
			document.forms[0].foreground.options[0].text = 'White';
			document.forms[0].foreground.options[1].value = '#ff0000';
			document.forms[0].foreground.options[1].text = 'Red';
			document.forms[0].foreground.options[2].value = '#00ff00';
			document.forms[0].foreground.options[2].text = 'Green';
			document.forms[0].foreground.options[3].value = '#0000ff';
			document.forms[0].foreground.options[3].text = 'Blue';
	}
	for(i=0; i < document.forms[0].foreground.length; i++)
		document.forms[0].foreground.options[i].disabled = false;
		
	document.forms[0].foreground.options[0].selected = true;

	update_colors();
}

function update_colors()
{
	eval("document.getElementById('demonstration').style.bac  kgroundColor = document.forms[0].background.value");
	eval("document.getElementById('demonstration').style.col  or = document.forms[0].foreground.value");

}
 -->
</script>
</head>
<body onload="update_colors()">
<form method="post" action="self.html">
<div>
<select name="background" onchange="set_foreground(this.value)">
<option value="#ffffff" selected="selected">White</option>
<option value="#ff0000">Red</option>
<option value="#00ff00">Green</option>
<option value="#0000ff">Blue</option>
<option value="#000000">Black</option>
</select> Background color<br />
<select name="foreground" onchange="update_colors()">
<option value="#ff0000">Red</option>
<option value="#00ff00">Green</option>
<option value="#0000ff">Blue</option>
<option value="#000000" selected="selected">Black</option>
</select> Foreground color
</div>
</form>
<div>
<p id="demonstration">
This is a textblock to show the current settings.<br />
Some more text.<br />
...and yet some more.
</p>
</div>
</body>
</html>

Of course, most of the switch block should be generated dynamically by PHP or so.

__________________
This is my code. Is it not nifty?

"The biggest problem encountered while trying to design a system that was completely foolproof, was, that people tended to underestimate the ingenuity of complete fools."
---Douglas Adams

Join the Itsacon fanclub!

Join the Itsacon fanclub

Current members:

Zero Tolerance: Spammers banned so far: 443

Last edited by Itsacon : September 27th, 2005 at 10:13 AM. Reason: Validated HTML

#11

September 27th, 2005, 02:57 PM

Seraphim

Registered User

Join Date: Aug 2005

Posts: 16

Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0

Quote:

Would you want them to first pick a style, then present the colour & sizes?

Yes

Quote:

I kind of think this may be easier without using Javascript and SELECT lists, but rather just links and some serverside code.

The Selects and options are generated by PHP which is pulled from a database

Quote:

Is there a specific reason you've chosen Javascript?

Because with PHP Im completeley lost!

I need to be able to map out all the styles that may be pulled from db and their available colors and sizes
using the code I already have it will display an image of the style and color chosen(not the size though), then style, color and size will be send via php to a shopping cart.

The kicker is that I cannot specify one select list a parent and another a child inside each select tag, But I can use the the select name tag to specify the same thing OUTSIDE of the select list.

I can however assign ONE onchange event to all select lists.

something like?

Code:

Style:
<select name="id[1]" onchange="limit_choice()">
<option value="id[10]">Tee Shirt</option>
<option value="id[11]">Long Sleeve</option>

Color:
<select name="id[2]" onchange="limit_choice()">
<option value="id[26]">White</option>
<option value="id[27]">Black</option>

Size:
<select name="id[3]" onchange="limit_choice()">
<option value="id[01]">Small</option>
<option value="id[02]">Medium</option>

Note the different name in each select that will remain the same because those selects will be present in all pages

So theoretically a script can be structured like thus:

Code:

If limit_choice() from select name="id[1]" = option value="id[10]"
show only options option value="id[26]" in select name="id[2]" and option value="id[02]" in select name="id[3]"

or hide certain choices

Code:

If limit_choice() from select name="id[1]" = option value="id[10]"
hide options option value="id[27]" in select name="id[2]" and option value="id[01]" in select name="id[3]"

#12

September 28th, 2005, 12:56 AM

Seraphim

Registered User

Join Date: Aug 2005

Posts: 16

Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0

Itsacons 'case' approach may be the method to use.
However can specific selects be assign to a function of the script without an different onchange event on each select. or perhaps a generic onchange event that changes actions depending from which select name it receives input?
I dont even know where to start

#13

September 28th, 2005, 03:20 PM

Seraphim

Registered User

Join Date: Aug 2005

Posts: 16

Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0

Solved?

I think I may have found a solution but its acting kinda strange.
It works locally which is an almost exact duplicate of the select list Im working on online, with a few errors:

Warning: assignment to undeclared variable arr_to
Line: 82
Warning: assignment to undeclared variable arr_options
Line: 83
Warning: assignment to undeclared variable j
Line: 260
Warning: assignment to undeclared variable i
Line: 271

The Code is in my next post

And the page online Im trying to make it work with doesnt even function at all.
Here
What am I doing wrong?!

#14

September 28th, 2005, 03:21 PM

Seraphim

Registered User

Join Date: Aug 2005

Posts: 16

Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0

The Code!

Code:

<html>
<head>
<title>a special chained / linked select : one parent decides for two children</title>
</head>
<body bgcolor="000000" text="ff0000">
<table>
<FORM name="formName">
</td></tr>
<tr><td>
<SELECT name="id[3]">
<OPTION value="nul" selected>Please Select</OPTION>
<OPTION value="10">Tee Shirt</OPTION>
<OPTION value="11">Organic Vintage Tee</OPTION>

<OPTION value="12">Vintage Tee</OPTION>
<OPTION value="13">Organic Girly Jersey Tee</OPTION>
<OPTION value="14">Girly Tee</OPTION>
<OPTION value="15">Long Sleeve Thermal</OPTION>
<OPTION value="16">Long Sleeve</OPTION>
<OPTION value="17">Ringer Tee</OPTION>
<OPTION value="18">Hemp Tee</OPTION>
<OPTION value="19">Hemp Long Sleeve</OPTION>
<OPTION value="20">Hemp Ladies' Tee</OPTION>

<OPTION value="21">Hemp Hoodie</OPTION>
<OPTION value="22">Melange Ladies' Ringer</OPTION>
<OPTION value="23">Ladies 3/4 Sleeve Jersey</OPTION>
<OPTION value="24">Ladies' Spaghetti Tank</OPTION>
<OPTION value="25">Ladies' Boy Beater Tank</OPTION>
</SELECT></td></tr>
<tr><td>
<SELECT name="id[2]">
<OPTION value="" selected>Please Select Style</OPTION>
<OPTION value="26">Black</OPTION>

<OPTION value="27">White</OPTION>
<OPTION value="28">Navy</OPTION>
<OPTION value="29">Ash</OPTION>
<OPTION value="30">Dark Ash</OPTION>
<OPTION value="31">Forest Green</OPTION>
<OPTION value="32">Safety Lime Green</OPTION>
<OPTION value="33">Safety Orange</OPTION>
<OPTION value="34">Purple</OPTION>
<OPTION value="35">Red</OPTION>

<OPTION value="36">Royal Blue</OPTION>
<OPTION value="37">Natural</OPTION>
<OPTION value="38">Slate Blue</OPTION>
<OPTION value="39">Granite</OPTION>
<OPTION value="40">Heather</OPTION>
<OPTION value="41">Asphalt</OPTION>
<OPTION value="42">Baby Blue</OPTION>
<OPTION value="43">Brown</OPTION>
<OPTION value="44">Kelly Green</OPTION>

<OPTION value="45">Light Pink</OPTION>
<OPTION value="46">Olive</OPTION>
<OPTION value="47">Silver</OPTION>
<OPTION value="48">Pink</OPTION>
<OPTION value="49">Army</OPTION>
<OPTION value="50">Light Blue</OPTION>
<OPTION value="51">Athletic Grey</OPTION>
<OPTION value="52">Burgundy</OPTION>
<OPTION value="53">Slate Blue</OPTION>

<OPTION value="54">Melenge Blue/Navy</OPTION>
<OPTION value="55">Melenge Green/Green</OPTION>
<OPTION value="56">Melenge Pink/Pink</OPTION>
<OPTION value="57">Melenge Tangerine/Tangerine</OPTION>
<OPTION value="58">Heather/Black</OPTION>
<OPTION value="59">Baby Blue/Navy</OPTION>
<OPTION value="60">Bright Orange/Orange</OPTION>
<OPTION value="61">Pink/Fuchsia</OPTION>
<OPTION value="62">White/Black</OPTION>

<OPTION value="63">White/Red</OPTION>
<OPTION value="64">White/Navy</OPTION>
</SELECT></td></tr>
<tr><td>
<SELECT name="id[1]">
<OPTION value="" selected>Please Select Style</OPTION>
<OPTION value="1">Small</OPTION>
<OPTION value="2">Medium</OPTION>
<OPTION value="3">Large</OPTION>
</SELECT></FORM>
</td></tr></table>

<SCRIPT type=text/javascript>
arr_to=new Array();
arr_options=new Array();
  // Linked Select Elements, no data table

 // Data table
 var optionData = new Array(
   new Array("nul","Please Select Style","null"),
   new Array("10","Please Select","null"),
   new Array("10","Black","26"),
   new Array("10","White","27"),
   new Array("10","Navy","28"),
   new Array("10","Ash","29"),
   new Array("10","Dark Ash","30"),
   new Array("10","Forest Green","31"),
   new Array("10","Safety Lime Green","32"),
   new Array("10","Safety Orange","33"),
   new Array("10","Purple","34"),
   new Array("10","Red","35"),
   new Array("10","Royal Blue","36"),
   new Array("11","Natural","37"),
   new Array("12","Black","26"),
   new Array("12","White","27"),
   new Array("12","Navy","28"),
   new Array("12","Heather","40"),
   new Array("12","Asphalt","41"),
   new Array("12","Baby Blue","42"),
   new Array("12","Brown","43"),
   new Array("12","Kelly Green","44"),
   new Array("12","Light Pink","45"),
   new Array("12","Olive","26"),
   new Array("12","Red","35"),
   new Array("13","Natural","37"),
   new Array("14","Black","26"),
   new Array("14","White","27"),
   new Array("14","Navy","28"),
   new Array("14","Heather","40"),
   new Array("14","Baby Blue","42"),
   new Array("14","Brown","43"),
   new Array("14","Pink","48"),
   new Array("14","Red","35"),
   new Array("14","Silver","47"),
   new Array("15","Black","26"),
   new Array("15","White","27"),
   new Array("15","Heather","40"),
   new Array("15","Army","49"),
   new Array("15","Light Blue","50"),
   new Array("16","Black","26"),
   new Array("16","White","27"),
   new Array("17","Coming Soon!",""),
   new Array("18","Black","26"),
   new Array("18","White","27"),
   new Array("18","Navy","28"),
   new Array("18","Dark Ash","30"),
   new Array("18","Natural","37"),
   new Array("18","Burgundy","52"),
   new Array("19","Black","26"),
   new Array("19","Natural","37"),
   new Array("19","Slate Blue","38"),
   new Array("19","Athletic Grey","51"),
   new Array("20","Black","26"),
   new Array("20","White","27"),
   new Array("20","Natural","37"),
   new Array("20","Heather","40"),
   new Array("20","Burgundy","52"),
   new Array("21","Black","26"),
   new Array("21","Athletic Grey","51"),
   new Array("21","Slate Blue","38"),
   new Array("22","Melenge Blue/Navy","54"),
   new Array("22","Melenge Green/Green","55"),
   new Array("22","Melenge Pink/Pink","56"),
   new Array("22","Melenge Tangerine/Tangerine","57"),
   new Array("23","Heather/Black","58"),
   new Array("23","Baby Blue/Navy","59"),
   new Array("23","Bright Orange/Orange","60"),
   new Array("23","Pink/Fuchsia","61"),
   new Array("23","White/Black","62"),
   new Array("23","White/Red","63"),
   new Array("23","White/Navy","64"),
   new Array("24","Black","26"),
   new Array("24","White","27"),
   new Array("24","Baby Blue","42"),
   new Array("24","Pink","48"),
   new Array("25","Coming Soon!","")

 );
 var optionData2 = new Array(
   new Array("nul","Please Select Style","2"),
   new Array("10","Small","1"),
   new Array("10","Medium","2"),
   new Array("10","Large","3"),
   new Array("10","XL","4"),
   new Array("10","XXL(+$1.00)","5"),
   new Array("10","3XL(+$2.00)","6"),
   new Array("10","4XL(+$3.00)","7"),
   new Array("10","5XL(+$3.00)","8"),
   new Array("10","6XL(+$5.00)-White,Navy only","9"),
   new Array("11","Small","1"),
   new Array("11","Medium","2"),
   new Array("11","Large","3"),
   new Array("11","XL","4"),
   new Array("11","XXL(+$1.00)","2"),
   new Array("12","Small","1"),
   new Array("12","Medium","2"),
   new Array("12","Large","3"),
   new Array("12","XL","4"),
   new Array("13","Small","1"),
   new Array("13","Medium","2"),
   new Array("13","Large","3"),
   new Array("13","XL","4"),
   new Array("13","XXL(+$1.00)","0"),
   new Array("14","Small","1"),
   new Array("14","Medium","2"),
   new Array("14","Large","3"),
   new Array("14","XL","4"),
   new Array("14","XXL(+$1.00)","0"),
   new Array("15","Small","1"),
   new Array("15","Medium","2"),
   new Array("15","Large","3"),
   new Array("15","XL","4"),
   new Array("15","XXL(+$1.00)","2"),
   new Array("16","Small","1"),
   new Array("16","Medium","2"),
   new Array("16","Large","3"),
   new Array("16","XL","4"),
   new Array("16","XXL(+$2.00)","5"),
   new Array("16","3XL(+$3.00)","6"),
   new Array("16","4XL(+$4.00)","7"),
   new Array("17","Coming Soon!","2"),
   new Array("18","Medium","2"),
   new Array("18","Large","3"),
   new Array("18","XL","4"),
   new Array("18","XXL","5"),
   new Array("18","3XL(+$1.00)","6"),
   new Array("19","Medium","2"),
   new Array("19","Large","3"),
   new Array("19","XL","4"),
   new Array("19","XXL","5"),
   new Array("19","3XL(+$1.00)","6"),
   new Array("20","Small","1"),
   new Array("20","Medium","2"),
   new Array("20","Large","3"),
   new Array("20","XL","4"),
   new Array("20","XXL(+$2.00)","5"),
   new Array("21","Small","1"),
   new Array("21","Medium","2"),
   new Array("21","Large","3"),
   new Array("21","XL","4"),
   new Array("21","XXL","5"),
   new Array("22","Small","1"),
   new Array("22","Medium","2"),
   new Array("22","Large","3"),
   new Array("22","XL","4"),
   new Array("23","Small","1"),
   new Array("23","Medium","2"),
   new Array("23","Large","3"),
   new Array("23","XL","4"),
   new Array("24","Small","1"),
   new Array("24","Medium","2"),
   new Array("24","Large","3"),
   new Array("24","XL","4"),
   new Array("25","Coming Soon!","")
   )
 // Linked select elements, data table
 function initLinkedSelect2(from,to,options) {
     (from.style || from).visibility = "visible";

  arr_to.push(to);
  arr_options.push(options);
   from.onchange =  function()
   {
  change_them_all(from, arr_to, arr_options)   }

     from.onchange();

 }

function change_them_all(from, arr_to, arr_options)
 {
  for (j=0; j<arr_to.length; j++)
   {

  change_them(from,arr_to[j], arr_options[j]) ;

  }
  }
  function change_them(from,to, options) {

       var fromCode = from.options[from.selectedIndex].value;
       to.options.length = 0;
       for (i = 0; i < options.length; i++) {
         if (options[i][0] == fromCode) {
           to.options[to.options.length] =
                new Option(options[i][1],options[i][2]);
         }
       }
       to.options[0].selected = true;

     }

//this only works with one parent element
   var elems2=document.forms['formName'].elements;
   initLinkedSelect2(elems2['id[3]'],elems2['id[2]'],optionData);
   var elems3=document.forms['formName'].elements;
   initLinkedSelect2(elems2['id[3]'],elems2['id[1]'],optionData2);
</SCRIPT>
</body>
</html>

#15

September 29th, 2005, 10:55 AM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 14 m 9 sec
Reputation Power: 9

I spent my time on this because I plan to convert it into an article.

Here's a rough sketch of it, using an object oriented approach.
There are things that I may do otherwise if this is to go into production (I wouldn't populate the main list using Javascript), but this seems to work as requested.

I suggest you use it as a base, and not just copy all my stuff... it may not perform EXACTLY how you want it to in production.

Code:

<html>
<head>
<title>Select List Demo</title>
<script type="text/javascript">

	var clothes = new Object();

	clothes[10] = new Object();
	clothes[10]['name'] = 'Tee Shirt';
	clothes[10]['size'] = new Array('Small','Medium','Large');
	clothes[10]['colors'] = new Array('Black','White','Blue','Red');

	clothes[11] = new Object();
	clothes[11]['name'] = 'Organic Vintage Tee';
	clothes[11]['size'] = new Array('Small','Medium','Large','XL');
	clothes[11]['colors'] = new Array('Black','White','Blue','Green');

	clothes[12] = new Object();
	clothes[12]['name'] = 'Vintage Tee';
	clothes[12]['size'] = new Array('Small','Medium','Large');
	clothes[12]['colors'] = new Array('Black','White','Blue','Red');

	clothes[13] = new Object();
	clothes[13]['name'] = 'Organic Girly Jersey Tee';
	clothes[13]['size'] = new Array('Small','Medium','Large','XL');
	clothes[13]['colors'] = new Array('Black','White','Blue','Red');

	clothes[14] = new Object();
	clothes[14]['name'] = 'Girly Tee';
	clothes[14]['size'] = new Array('Small');
	clothes[14]['colors'] = new Array('Black','White','Blue','Red');

	clothes[15] = new Object();
	clothes[15]['name'] = 'Long Sleeve Thermal';
	clothes[15]['size'] = new Array('Small','Medium','Large');
	clothes[15]['colors'] = new Array('Black','White','Blue','Red');

	clothes[16] = new Object();
	clothes[16]['name'] = 'Long Sleeve';
	clothes[16]['size'] = new Array('Small','Medium','Large');
	clothes[16]['colors'] = new Array('Black','White','Blue','Red');

	clothes[17] = new Object();
	clothes[17]['name'] = 'Ringer Tee';
	clothes[17]['size'] = new Array('Small','Medium','Large');
	clothes[17]['colors'] = new Array('Black','White','Blue','Red');

	clothes[18] = new Object();
	clothes[18]['name'] = 'Hemp Tee';
	clothes[18]['size'] = new Array('Large','XL');
	clothes[18]['colors'] = new Array('Green');

	clothes[19] = new Object();
	clothes[19]['name'] = 'Hemp Long Sleeve';
	clothes[19]['size'] = new Array('Large','XL');
	clothes[19]['colors'] = new Array('Green');

	clothes[20] = new Object();
	clothes[20]['name'] = 'Hemp Ladies\' Tee';
	clothes[20]['size'] = new Array('Small','Medium','Large','XL');
	clothes[20]['colors'] = new Array('Green');

	clothes[21] = new Object();
	clothes[21]['name'] = 'Hemp Hoodie';
	clothes[21]['size'] = new Array('Large','XL');
	clothes[21]['colors'] = new Array('Green');

	clothes[22] = new Object();
	clothes[22]['name'] = 'Melange Ladies\' Ringer';
	clothes[22]['size'] = new Array('Small','Medium','Large');
	clothes[22]['colors'] = new Array('Black','White','Blue','Red');

	clothes[23] = new Object();
	clothes[23]['name'] = 'Ladies 3/4 Sleeve Jersey';
	clothes[23]['size'] = new Array('Small','Medium','Large');
	clothes[23]['colors'] = new Array('Black','White','Blue','Red');

	clothes[24] = new Object();
	clothes[24]['name'] = 'Ladies\' Spaghetti Tank';
	clothes[24]['size'] = new Array('Small','Medium','Large');
	clothes[24]['colors'] = new Array('Black','White','Blue','Red');

	clothes[25] = new Object();
	clothes[25]['name'] = 'Ladies\' Boy Beater Tank';
	clothes[25]['size'] = new Array('Small','Medium','Large');
	clothes[25]['colors'] = new Array('Black','White','Blue','Red');


	function clearForm() {
		clearList(document.getElementById('style'));
		clearList(document.getElementById('size'));
		clearList(document.getElementById('color'));
	}

	function populateStyle() {
		clearForm();

		for (var item in clothes) {
			var n = document.createElement('option');
			n.text = clothes[item]['name'];
			n.value = item;

			document.getElementById('style').add(n,null);
		}
	}

	function clearList(selectList) {
		selectList.options.length=0;
	}

	function populateChildren(item) {
		populateColor(item);
		populateSize(item);
	}

	function populateColor(item) {
		clearList(document.getElementById('color'));

		for (var color in clothes[item]['colors']) {
			var n = document.createElement('option');
			n.text = clothes[item]['colors'][color];
			n.value = item;

			document.getElementById('color').add(n,null);
		}
	}

	function populateSize(item) {
		clearList(document.getElementById('size'));

		for (var size in clothes[item]['size']) {
			var n = document.createElement('option');
			n.text = clothes[item]['size'][size];
			n.value = item;

			document.getElementById('size').add(n,null);
		}
	}

</script>
</head>

<body onload="populateStyle()">
<form name="formName" action="submit.php">

Style:
<select id="style" onchange="javascript:populateChildren(this.options[this.selectedIndex].value);">
	<option value="" selected="selected">Please Select</option>
	<option value="10">Tee Shirt</option>
	<option value="11">Organic Vintage Tee</option>
	<option value="12">Vintage Tee</option>
	<option value="13">Organic Girly Jersey Tee</option>
	<option value="14">Girly Tee</option>
	<option value="15">Long Sleeve Thermal</option>
	<option value="16">Long Sleeve</option>
	<option value="17">Ringer Tee</option>
	<option value="18">Hemp Tee</option>
	<option value="19">Hemp Long Sleeve</option>
	<option value="20">Hemp Ladies' Tee</option>
	<option value="21">Hemp Hoodie</option>
	<option value="22">Melange Ladies' Ringer</option>
	<option value="23">Ladies 3/4 Sleeve Jersey</option>
	<option value="24">Ladies' Spaghetti Tank</option>
	<option value="25">Ladies' Boy Beater Tank</option>
</select>

Color:
<select id="color">
	<option value="" selected="selected">Please Select Style</option>
	<option>Black</option>
	<option>White</option>
	<option>Blue</option>
	<option>Red</option>
	<option>Green</option>
</select>

Size:
<select id="size">
	<option value="" selected="selected">Please Select Style</option>
	<option value="small">Small</option>
	<option value="medium">Medium</option>
	<option value="large">Large</option>
	<option value="xxl">XXL</option>
</select>

</form>

</body>
</html>

There are some good tutorials out there on how to convert PHP variables into Javascript-ready variables... I'm sure with a little bit of common sense you should be able to walk through the logic and do it yourself =)

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: