JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsProgrammingJavaScript Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old September 25th, 2005, 05:03 PM
Seraphim Seraphim is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2005
Posts: 16 Seraphim User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0
Exclamation !!!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.

Reply With Quote
  #2  
Old September 25th, 2005, 05:09 PM
Seraphim Seraphim is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2005
Posts: 16 Seraphim User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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

Reply With Quote
  #3  
Old September 25th, 2005, 05:16 PM
Seraphim Seraphim is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2005
Posts: 16 Seraphim User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0
Bump!Bump!Bump!

Reply With Quote
  #4  
Old September 25th, 2005, 10:03 PM
Mittineague's Avatar
Mittineague Mittineague is offline
Contributing User
Dev Articles Novice (500 - 999 posts)
 
Join Date: Jul 2005
Location: West Springfield, Massachusetts
Posts: 552 Mittineague User rank is Private First Class (20 - 50 Reputation Level)Mittineague User rank is Private First Class (20 - 50 Reputation Level) 
Time spent in forums: 1 Week 1 Day 9 h 1 m 33 sec
Reputation Power: 14
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.

Reply With Quote
  #5  
Old September 26th, 2005, 03:30 AM
Seraphim Seraphim is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2005
Posts: 16 Seraphim User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0
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>

Reply With Quote
  #6  
Old September 26th, 2005, 03:31 AM
Seraphim Seraphim is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2005
Posts: 16 Seraphim User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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>

Reply With Quote
  #7  
Old September 26th, 2005, 08:16 PM
Mittineague's Avatar
Mittineague Mittineague is offline
Contributing User
Dev Articles Novice (500 - 999 posts)
 
Join Date: Jul 2005
Location: West Springfield, Massachusetts
Posts: 552 Mittineague User rank is Private First Class (20 - 50 Reputation Level)Mittineague User rank is Private First Class (20 - 50 Reputation Level) 
Time spent in forums: 1 Week 1 Day 9 h 1 m 33 sec
Reputation Power: 14
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/

Reply With Quote
  #8  
Old September 26th, 2005, 09:02 PM
Seraphim Seraphim is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2005
Posts: 16 Seraphim User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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

Reply With Quote
  #9  
Old September 27th, 2005, 07:42 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 18
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.

Reply With Quote
  #10  
Old September 27th, 2005, 09:06 AM
Itsacon's Avatar
Itsacon Itsacon is offline
Command Line Warrior
Click here for more information
 
Join Date: Aug 2004
Location: Sector ZZ9 Plural Z Alpha
Posts: 1,029 Itsacon User rank is Lance Corporal (50 - 100 Reputation Level)Itsacon User rank is Lance Corporal (50 - 100 Reputation Level)Itsacon User rank is Lance Corporal (50 - 100 Reputation Level)  Folding Points: 2966446 Folding Title: Super Ultimate Folder - Level 6Folding Points: 2966446 Folding Title: Super Ultimate Folder - Level 6Folding Points: 2966446 Folding Title: Super Ultimate Folder - Level 6Folding Points: 2966446 Folding Title: Super Ultimate Folder - Level 6Folding Points: 2966446 Folding Title: Super Ultimate Folder - Level 6Folding Points: 2966446 Folding Title: Super Ultimate Folder - Level 6Folding Points: 2966446 Folding Title: Super Ultimate Folder - Level 6Folding Points: 2966446 Folding Title: Super Ultimate Folder - Level 6Folding Points: 2966446 Folding Title: Super Ultimate Folder - Level 6Folding Points: 2966446 Folding Title: Super Ultimate Folder - Level 6
Time spent in forums: 1 Week 12 h 55 m 59 sec
Reputation Power: 16
Send a message via ICQ to Itsacon
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!    
Zero Tolerance: Spammers banned so far: 592

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

Reply With Quote
  #11  
Old September 27th, 2005, 01:57 PM
Seraphim Seraphim is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2005
Posts: 16 Seraphim User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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]"

Reply With Quote
  #12  
Old September 27th, 2005, 11:56 PM
Seraphim Seraphim is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2005
Posts: 16 Seraphim User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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

Reply With Quote
  #13  
Old September 28th, 2005, 02:20 PM
Seraphim Seraphim is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2005
Posts: 16 Seraphim User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0
Exclamation 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?!

Reply With Quote
  #14  
Old September 28th, 2005, 02:21 PM
Seraphim Seraphim is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2005
Posts: 16 Seraphim User rank is Just a Lowly Private (1 - 20 Reputation Level) 
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>

Reply With Quote
  #15  
Old September 29th, 2005, 09:55 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 18
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 =)

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsProgrammingJavaScript Development > !!!HELP!!!Modified Chained Select!!!HELP!!!


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap