I am currently developing a search functions which utilises drop down menus.
I currently have three drop down menus but want to extend this to five...Below is the code I currently have...
<HTML>
<TITLE> Plade Fittings & Valves </TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[3] = "Orifice Size A";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Orifice Size B";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Orifice Size C";
arrItemsGrp1[5] = 1;
arrItems1[6] = "Orifice Size D";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Orifice Size E";
arrItemsGrp1[7] = 2;
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[20] = "Port Connection 12";
arrItemsGrp2[20] = 0
arrItems2[21] = "Port Connection 15";
arrItemsGrp2[21] = 0
arrItems2[31] = "Port Connection 14";
arrItemsGrp2[31] = 1
arrItems2[34] = "Port Connection 13";
arrItemsGrp2[34] = 1
arrItems2[30] = "Port Connection 16";
arrItemsGrp2[30] = 2
function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice")
{
// Empty the third drop down box of any choices
for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "[SELECT]" ;
controlToPopulate.add(myEle) ;
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
// End -->
</script>
</HEAD>
<BODY>
<form name=myChoices method="get" action="product.asp">
<table>
<tr>
<thead> <B> PLADE --- Valves & Fittings Search ---
<P>Select from each menu then press submit to find your product</P>
<P></P>
<td>
<B>Flow CV:
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
<option value=http://www.webdeveloper.com/forum/archive/index.php/0 SELECTED>[SELECT]</option>
<option value=1>Flow CV1</option>
<option value=2>Flow CV2</option>
<option value=3>Flow CV3</option>
</SELECT>
</TD><TD>
<B>---> Orifice Size:
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
<option value=0 SELECTED>[SELECT]</option></SELECT>
<B>---> Port Connection:
<SELECT id=thirdChoice name=thirdChoice> <option value=0 SELECTED>[SELECT]</option></SELECT>
<input type="submit" value="Get your Product">
</TD>
</tr>
</TABLE>
</form>
</BODY>
</HTML>
The code ends with a form which allows me to submit the information to an ASP page which I am working on as well.
Any advice on how to create two new drop down menus would be appreciated.
Regards
Andy
I currently have three drop down menus but want to extend this to five...Below is the code I currently have...
<HTML>
<TITLE> Plade Fittings & Valves </TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[3] = "Orifice Size A";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Orifice Size B";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Orifice Size C";
arrItemsGrp1[5] = 1;
arrItems1[6] = "Orifice Size D";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Orifice Size E";
arrItemsGrp1[7] = 2;
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[20] = "Port Connection 12";
arrItemsGrp2[20] = 0
arrItems2[21] = "Port Connection 15";
arrItemsGrp2[21] = 0
arrItems2[31] = "Port Connection 14";
arrItemsGrp2[31] = 1
arrItems2[34] = "Port Connection 13";
arrItemsGrp2[34] = 1
arrItems2[30] = "Port Connection 16";
arrItemsGrp2[30] = 2
function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice")
{
// Empty the third drop down box of any choices
for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "[SELECT]" ;
controlToPopulate.add(myEle) ;
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
// End -->
</script>
</HEAD>
<BODY>
<form name=myChoices method="get" action="product.asp">
<table>
<tr>
<thead> <B> PLADE --- Valves & Fittings Search ---
<P>Select from each menu then press submit to find your product</P>
<P></P>
<td>
<B>Flow CV:
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
<option value=http://www.webdeveloper.com/forum/archive/index.php/0 SELECTED>[SELECT]</option>
<option value=1>Flow CV1</option>
<option value=2>Flow CV2</option>
<option value=3>Flow CV3</option>
</SELECT>
</TD><TD>
<B>---> Orifice Size:
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
<option value=0 SELECTED>[SELECT]</option></SELECT>
<B>---> Port Connection:
<SELECT id=thirdChoice name=thirdChoice> <option value=0 SELECTED>[SELECT]</option></SELECT>
<input type="submit" value="Get your Product">
</TD>
</tr>
</TABLE>
</form>
</BODY>
</HTML>
The code ends with a form which allows me to submit the information to an ASP page which I am working on as well.
Any advice on how to create two new drop down menus would be appreciated.
Regards
Andy