...

View Full Version : Multiple Sets of Dynamic List boxes



theking8063
01-14-2012, 11:30 PM
I'm trying to use this code to create 6 sets of (each set 2 Dynamic List boxes). However I have the problem that Category 1-6 selection does not select the correct (adjacent) subcateory list box and instead populates the last selection in subcategory list box 1. How can I set the Java/HTML code so that for example Category #3, populates the selection/case into SubCategory#3 list box?

Form Code (only with 2 Category, SubCategory) this when working will be expanded to 6.


<table border="0" width="560">
<tbody>
<tr>
<td align="center"><strong>Item#</strong></td>
<td align="center">Paint Type</td>
<td align="center">Colour</td>
<td align="center">Litres</td>
</tr>
<tr>

<td width="56%" align="left" valign="middle">1.<select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">

<option value="">Select Range</option>
<option value="New Paint">New Paint</option>
<option value="Recycled Paint">Recycled Paint</option>
</select></td><td name="cell1">

<script type="text/javascript" language="JavaScript" >
document.write('<select name="subcategory1" id="subcategory1" name="cell1" ><option value="" name="subcategory1">Select Product</option></select>')
</script>

<noscript><select name="subcategory1" id="subcategory1" >
<option value="">Select Product</option>
</select>
</noscript>

</td><td>
<input class="formbox" size="20" name="01_colour" /></td><td>
<input class="formbox" size="5" name="01_litres" /></td>
</tr><br>

<tr>


<td width="56%" align="left" valign="middle">2.<select name="category2" id="category2" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">

<option value="">Select Range</option>
<option value="New Paint2">New Paint</option>
<option value="Recycled Paint2">Recycled Paint</option>
</select></td><td name="cell2">
<script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory" id="subcategory"><option value="" name="subcategory">Select Product</option></select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Product</option>
</select>
</noscript>


</td><td>
<input class="formbox" size="20" name="02_colour" /></td><td>
<input class="formbox" size="5" name="02_litres" /></td>
</tr>


</table>

Java Script which I think is the problem, I cant work out how to name the relevant cell the selection should display in.


<script language="javascript" type="text/javascript">
function dropdownlist(indexlist)
{

document.SampleForm.subcategory1.options.length = 0;
switch(indexlist)
{

case "New Paint" :
document.SampleForm.subcategory1.options[0]=new Option("Select Product","");
document.SampleForm.subcategory1.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");
document.SampleForm.subcategory1.options[2]=new Option("Audio/Video","Audio/Video");
document.SampleForm.subcategory1.options[3]=new Option("Beddings","Beddings");
document.SampleForm.subcategory1.options[4]=new Option("Camera","Camera");
document.SampleForm.subcategory1.options[5]=new Option("Cell Phones","Cell Phones");

break;

case "Recycled Paint" :
document.SampleForm.subcategory1.options[0]=new Option("Select Product","");
document.SampleForm.subcategory1.options[1]=new Option("Interior, Flat/Matt","Interior, Flat/Matt");
document.SampleForm.subcategory1.options[2]=new Option("Interior, Low Sheen","Interior, Low Sheen");
document.SampleForm.subcategory1.options[3]=new Option("Interior, Semi Gloss, Acrylic","Interior, Semi Gloss, Acrylic");

document.SampleForm.subcategory1.options[4]=new Option("Interior, Gloss, Acrylic","Interior, Gloss, Acrylic");

document.SampleForm.subcategory1.options[5]=new Option("Interior, High Gloss, Acrylic","Interior, High Gloss, Acrylic");
document.SampleForm.subcategory1.options[6]=new Option("Interior, Suede","Interior, Suede");
document.SampleForm.subcategory1.options[7]=new Option("Exterior, Flat/Matt","Exterior, Flat/Matt");
document.SampleForm.subcategory1.options[8]=new Option("Exterior, Low Sheen","Exterior, Low Sheen");
document.SampleForm.subcategory1.options[9]=new Option("Exterior, Semi Gloss, Acrylic","Exterior, Semi Gloss, Acrylic");
document.SampleForm.subcategory1.options[10]=new Option("Exterior, Gloss, Acrylic","Exterior, Gloss, Acrylic");
document.SampleForm.subcategory1.options[11]=new Option("Exterior, High Gloss, Acrylic","Exterior, High Gloss, Acrylic");
document.SampleForm.subcategory1.options[12]=new Option("Paving/Concrete","Paving/Concrete");
document.SampleForm.subcategory1.options[13]=new Option("Dulux Acratex","Dulux Acratex");

break;




}




return true;
}
</script>

Thanks

Daniel

xelawho
01-14-2012, 11:47 PM
all of your dropdownlist function only references one dropdown list, subcategory1, with lines like this:


document.SampleForm.subcategory1.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");

you could fix it, but it's very old code and quite inefficient - if you're interested, a much better approach is here (http://www.w3.org/TR/WCAG20-TECHS/working-examples/SCR19/dynselect.html)

theking8063
01-15-2012, 12:02 AM
Thanks,

I dont confess to understand the coding of java, so often trial and error works best for me. I've tried making a small change to the provided code, but I still get the same fundamental error and that is Continental 2 selection is populated in Country 1 field.


<body>
<h1>Dynamic Select Statements</h1>
<label for="continent">Select Continent</label>
<select id="continent" onchange="countryChange(this);">
<option value="empty">Select a Continent</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
</select>
<label for="country">Select a country</label>
<select id="country">
<option value="0">Select a country</option>
</select>
<br>
<label for="continent">Select Continent</label>
<select id="continent" onchange="countryChange(this);">
<option value="empty">Select a Continent</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
</select>
<label for="country">Select a country</label>
<select id="country">
<option value="0">Select a country</option>
</select>
</body>

How can I fix this?

Daniel

jmrker
01-15-2012, 03:50 AM
See if you can decipher this. You should be able to easily add a third dynamic drop down list if you see how this works. :thumbsup:


<html>
<head>
<title> Dynamic Selections </title>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=248863

function NewList(info,newObj) {
if (info == '') { return }
var tmp;
var newElem = document.getElementById(newObj);
newElem.options.length = 0;
newElem.options[newElem.options.length] = new Option('Select','');
for (var i=0; i<Cont_Country[info].length; i++) {
tmp = Cont_Country[info][i];
newElem.options[newElem.options.length] = new Option(tmp,tmp);
}
}

var Cont_Country = {}
Cont_Country['NAmerica'] = ['Canada','United States','Mexico'];
Cont_Country['SAmerica'] = ['Argentina','Boliva','Brazil','Chile','Columbia','Uraguay']
Cont_Country['Asia'] = ['China','Russia','India'];
Cont_Country['Europe'] = ['England','France','Germany','Austria','Belgium','Spain'];
Cont_Country['Africa'] = ['Angola','Nigeria','South Africa','Rowanda'];
Cont_Country['Antartica'] = ['South Pole'];
Cont_Country['Australia'] = ['Melbourne','Queensland','Sydney'];

</script>
</head>

<body>
<h1>Dynamic Select Statements</h1>

<label>Select Continent</label>
<select id="continent1" onchange="NewList(this.value,'country1');">
<option value="">Select a Continent</option>
<option value="NAmerica">North America</option>
<option value="SAmerica">South America</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
</select>

<label>Select a country</label>
<select id="country1">
<option value="0">Select a country</option>
</select>
<p>

<label>Select Continent</label>
<select id="continent2" onchange="NewList(this.value,'country2');">
<option value="">Select a Continent</option>
<option value="Africa">Africa</option>
<option value="Antartica">Antartica</option>
<option value="Australia">Australia</option>
</select>

<label>Select a country/area/city</label>
<select id="country2">
<option value="0">Select a country</option>
</select>
</body>
</html>

theking8063
01-15-2012, 04:37 AM
Thanks for the help thus far, my code is working how I would like it. However when I go to submit the form the selections on the drop down menus are not emailed through through;


<script type="text/javascript">
//<![CDATA[
// array of possible countries in the same order as they appear in the country selection list
var countryLists = new Array(4)
countryLists["empty"] = ["Select Product"];
countryLists["Recycled Paint"] = ["Interior Flat/Matt", "Interior Low Sheen", "Interior Acrylic Semi Gloss", "Interior Acrylic Gloss", "Interior Acrylic High Gloss", "Interior Suede", "Exterior Flat/Matt", "Exterior Low Sheen", "Exterior Acrylic Semi Gloss","Exterior Acrylic Gloss","Exterior Acrylic High Gloss","Paving/Concrete","Dulux Acratex"];
countryLists["New Concrete/Paving Paint"] = [ "Berger Jet Dry Aquatread Satin 'Amber' 4 Litres", "Berger Jet Dry Gloss 'Extra Deep Tone' 4 Litres","Bondall Bondcrete 4 Litres"];

countryLists["New Exterior Paint"] = ["Bondall Bondcrete 4 Litres", "Bristol Supreme Undercoat Oil Based","British Paints Gloss Acrylic", "Dulux Aquanamel High Gloss", "Dulux Aquanamel Semi Gloss", "Dulux Medium Texture",
"Dulux Once Low Sheen","Dulux Prepcoat Acrylic Primer","Dulux Prep Lock Stain Blocker","Dulux Professional Premium Full Gloss", "Dulux Super Enamel High Gloss","Dulux Tuscan","Dulux Weathershield Low Sheen",
"Dulux Weathershield Matt", "Dulux Weathershield Roof Semi Gloss Acrylic", "Dulux Weathershield Roof & Trim Semi Gloss Acrylic", "Taubmans SunProof Max Gloss Acrylic", "Taubmans Timbertop", "Walpamur Acrylic Undercoat", "Walpamur Fence Finish 'Iron Bark'" ];

countryLists["New Interior Paint"]= ["Bondall Bondcrete 4 Litres","Dulux Aquanamel High Gloss","Dulux Aquanamel Semi Gloss","Dulux Ceiling White","Dulux Clear Coat Matt","Dulux Colour Effects","Dulux Precoat Acrylic Primer", "Dulux Professional Premium Ceiling Paint",
"Dulux Once Low Sheen", "Dulux Professional Premium Full Gloss","Dulux Super Enamel High Gloss", "Dulux Wash & Wear 101 Acrylic Gloss",
"Dulux Wash & Wear 101 Flat","Dulux Wash & Wear 101 Low Sheen","Dulux Wash & Wear 101 Semi Gloss", "Walpamur Acrylic Undercoat"];

countryLists["New Metal Paint"] = ["Dulux Quit Rust Etch Primer","Dulux Quit Rust Gloss Enamel", "Dulux Quit Rust Gloss Enamel Topcoat","Dulux Professional Premium Cold Galvanised Primer","Dulux Silvasheen Aluminium Enamel"];

countryLists["New Timber Stains & Oils"] = ["Cabot's Decking Stain","Cabot's Deck & Exterior Stain","Cabot's Interior Varnish Stain","Cabot's Kwik Step","Cabot's Timber Colour","Cabot's Timber Shades Semi Transparent",
"Feast Watson Decking Oil","Feast Watson Decking Stain","Feast Watson Fungishield","Intergrain Natural Stain","Wattyl Deck & Exterior Timber Stain"];


// + country1-5 lists ....

/* CountryChange() is called from the onchange event of a select element.
* param selectObj - the select object which fired the on change event.
*/
function countryChange(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the coutnryLists array
cList = countryLists[which];
// get the country select element via its known id
var cSelect = document.getElementById("country");
// remove the current options from the country select
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i=0; i<cList.length; i++) {
newOption = document.createElement("option");
newOption.value = cList[i]; // assumes option string and value are the same
newOption.text=cList[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e) {
cSelect.appendChild(newOption);

}
}
}
function country1Change(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the coutnryLists array
cList1 = country1Lists[which];
// get the country select element via its known id
var cSelect = document.getElementById("country1");
// remove the current options from the country select
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i=0; i<cList1.length; i++) {
newOption = document.createElement("option");
newOption.value = cList1[i]; // assumes option string and value are the same
newOption.text=cList1[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e) {
cSelect.appendChild(newOption);

}
}
}
function country3Change(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the coutnryLists array
cList3 = country3Lists[which];
// get the country select element via its known id
var cSelect = document.getElementById("country3");
// remove the current options from the country select
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i=0; i<cList3.length; i++) {
newOption = document.createElement("option");
newOption.value = cList3[i]; // assumes option string and value are the same
newOption.text=cList3[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e) {
cSelect.appendChild(newOption);

}
}
}

function country4Change(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the coutnryLists array
cList4 = country4Lists[which];
// get the country select element via its known id
var cSelect = document.getElementById("country4");
// remove the current options from the country select
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i=0; i<cList4.length; i++) {
newOption = document.createElement("option");
newOption.value = cList4[i]; // assumes option string and value are the same
newOption.text=cList4[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e) {
cSelect.appendChild(newOption);

}
}
}

function country5Change(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the coutnryLists array
cList5 = country5Lists[which];
// get the country select element via its known id
var cSelect = document.getElementById("country5");
// remove the current options from the country select
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i=0; i<cList5.length; i++) {
newOption = document.createElement("option");
newOption.value = cList5[i]; // assumes option string and value are the same
newOption.text=cList5[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e) {
cSelect.appendChild(newOption);

}
}
}

function country6Change(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the coutnryLists array
cList6 = country6Lists[which];
// get the country select element via its known id
var cSelect = document.getElementById("country6");
// remove the current options from the country select
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i=0; i<cList6.length; i++) {
newOption = document.createElement("option");
newOption.value = cList6[i]; // assumes option string and value are the same
newOption.text=cList6[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e) {
cSelect.appendChild(newOption);

}
}
}
//]]>
</script>


<table border="0" width="100%">
<tbody>
<tr>
<td width="2%"></td>
<td width="30%" align="center" ><strong>Item#</strong></td>
<td width="40%"align="center">Paint Type</td>
<td width="20%"align="center" >Colour</td>
<td width="8%"align="center">Litres</td>
</tr>
<tr>
<td>1.</td>
<td align="left" valign="middle" class="field">
<select name="Paint Range" id="continent" onchange="countryChange(this);">

<option value="">Select Range</option>
<option value="New Concrete/Paving Paint">New Concrete/Paving Paint</option>
<option value="New Exterior Paint">New Exterior Paint</option>
<option value="New Interior Paint">New Interior Paint</option>
<option value="New Metal Paint">New Metal Paint</option>
<option value="New Timber Stains & Oils">New Timber Stains & Oils</option>
<option value="Recycled Paint">Recycled Paint</option>
</select></td><td class="field">

<select name="Paint Product" id="country" onchange="display(this,'text','image');">
<option value="0" >Select Product</option>
</select>


</td><td>
<input class="formbox" size="20" name="01_colour" /></td><td>
<input class="formbox" size="5" name="01_litres" /></td>
</tr><br>

<tr>

<td>2.</td>
<td align="left" valign="middle" class="field">
<select name="Paint Range1" id="continent" onchange="country1Change(this);">

<option value="">Select Range</option>
<option value="New Concrete/Paving Paint">New Concrete/Paving Paint</option>
<option value="New Exterior Paint">New Exterior Paint</option>
<option value="New Interior Paint">New Interior Paint</option>
<option value="New Metal Paint">New Metal Paint</option>
<option value="New Timber Stains & Oils">New Timber Stains & Oils</option>
<option value="Recycled Paint">Recycled Paint</option>
</select></td><td class="field">

<select name="Paint Product1" id="country1" onchange="display(this,'text','image');">
<option value="0">Select Product</option>
</select>


</td><td>
<input class="formbox" size="20" name="02_colour" /></td><td>
<input class="formbox" size="5" name="02_litres" /></td>
</tr>

<tr>

<td>3.</td>
<td align="left" valign="middle" class="field">
<select name="Paint Range3" id="continent" onchange="country3Change(this);">

<option value="">Select Range</option>
<option value="New Concrete/Paving Paint">New Concrete/Paving Paint</option>
<option value="New Exterior Paint">New Exterior Paint</option>
<option value="New Interior Paint">New Interior Paint</option>
<option value="New Metal Paint">New Metal Paint</option>
<option value="New Timber Stains & Oils">New Timber Stains & Oils</option>
<option value="Recycled Paint">Recycled Paint</option>
</select></td><td class="field">

<select name="Paint Product3" id="country3">
<option value="0">Select Product</option>
</select>


</td><td>
<input class="formbox" size="20" name="03_colour" /></td><td>
<input class="formbox" size="5" name="03_litres" /></td>
</tr>

<tr>

<td>4.</td>
<td align="left" valign="middle" class="field">
<select name="Paint Range4" id="continent" onchange="country4Change(this);">

<option value="">Select Range</option>
<option value="New Concrete/Paving Paint">New Concrete/Paving Paint</option>
<option value="New Exterior Paint">New Exterior Paint</option>
<option value="New Interior Paint">New Interior Paint</option>
<option value="New Metal Paint">New Metal Paint</option>
<option value="New Timber Stains & Oils">New Timber Stains & Oils</option>
<option value="Recycled Paint">Recycled Paint</option>
</select></td><td class="field">

<select name="Paint Product4" id="country4">
<option value="0">Select Product</option>
</select>


</td><td>
<input class="formbox" size="20" name="04_colour" /></td><td>
<input class="formbox" size="5" name="04_litres" /></td>
</tr>
<tr>

<td>5.</td>
<td align="left" valign="middle" class="field">
<select name="Paint Range5 "id="continent" onchange="country5Change(this);">

<option value="">Select Range</option>
<option value="New Concrete/Paving Paint">New Concrete/Paving Paint</option>
<option value="New Exterior Paint">New Exterior Paint</option>
<option value="New Interior Paint">New Interior Paint</option>
<option value="New Metal Paint">New Metal Paint</option>
<option value="New Timber Stains & Oils">New Timber Stains & Oils</option>
<option value="Recycled Paint">Recycled Paint</option>
</select></td><td class="field">

<select name="Paint Product5" id="country5">
<option value="0">Select Product</option>
</select>


</td><td>
<input class="formbox" size="20" name="05_colour" /></td><td>
<input class="formbox" size="5" name="05_litres" /></td>
</tr>
</table>

Lines such as 05_colour & 05_lires does submit with the enquiry, as does my location drop down menu.

Daniel

theking8063
01-15-2012, 08:26 AM
Solved, simply a matter of id and name fields matching.

Daniel

jmrker
01-15-2012, 02:46 PM
Solved, simply a matter of id and name fields matching.

Daniel

:confused:
I'm glad you could solve your problem, :)
but I don't understand why you did not make it one function as I provided in my last post
rather than repeat the function (country2Change...country6Change) so many times.
It would have probably avoided the last problem altogether.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum