Hi folks,
Need some advice on a little problem I have.
Currently building a search function which uses drop down boxes...
I have 3 drop down boxes, each of which is dependant on the previoud one.
i.e. the 2nd menu is populated when the user selects from the 1st menu..3rd is populated from the 2nd.
Now I want to add 2 more menus to this drop down menu search function.
I am using arrays to do this like so:
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[31] = "Port Connection 14";
arrItemsGrp2[31] = 1;
arrItems2[34] = "Port Connection 13";
arrItemsGrp2[34] = 1;
I then have the following functions:
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) ;
}
}
}
I then have a form for the user to submit to a further page(an asp page I am developing as well)
<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 Cv 1</option>
<option value="2">Flow Cv 2</option>
<option value="3">Flow Cv 3</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>
Now I am bit of a novice to Javascript so could someone tell me how to add some two more drop down menus to this script so that they are dependant on the previous selection, please.
any advice would be appreciated.
Regards,
Andy
Need some advice on a little problem I have.
Currently building a search function which uses drop down boxes...
I have 3 drop down boxes, each of which is dependant on the previoud one.
i.e. the 2nd menu is populated when the user selects from the 1st menu..3rd is populated from the 2nd.
Now I want to add 2 more menus to this drop down menu search function.
I am using arrays to do this like so:
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[31] = "Port Connection 14";
arrItemsGrp2[31] = 1;
arrItems2[34] = "Port Connection 13";
arrItemsGrp2[34] = 1;
I then have the following functions:
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) ;
}
}
}
I then have a form for the user to submit to a further page(an asp page I am developing as well)
<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 Cv 1</option>
<option value="2">Flow Cv 2</option>
<option value="3">Flow Cv 3</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>
Now I am bit of a novice to Javascript so could someone tell me how to add some two more drop down menus to this script so that they are dependant on the previous selection, please.
any advice would be appreciated.
Regards,
Andy