PDA

Click to See Complete Forum and Search --> : Dynamic Drop Down Boxes - Netscape

sanjayv
05-14-2003, 08:23 AM
I saw the code for dynamic drop down menus on Javascript.com which works for IE only. I have three drop down boxes and I need to populate the value of second box based on first box and the value of third box based on the second box. Can anyone help me in locating the javascript code for the same.:confused:
khalidali63
05-14-2003, 08:59 AM
Take a look at this link..
I think that whill help you.

/MultipleListBoxResult3rdListBox.html (http://www.webapplikations.com/pages/html_js/forms/MultipleListBoxResult3rdListBox.html)
sanjayv
05-14-2003, 09:34 AM
Khalid

Thanks for the prompt response. My requirement is slighly different. I need all the three boxes visible all the times and the values in 2nd will chnage dynamically based on first and the value in 3rd will change based on 2nd box. Something similar to the below script, I have this script for IE but not for Netscape.
*********************************
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();

arrItems1[3] = "Truck";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Train";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Car";
arrItemsGrp1[5] = 1;

arrItems1[6] = "Boat";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Submarine";
arrItemsGrp1[7] = 2;

arrItems1[0] = "Planes";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Ultralight";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Glider";
arrItemsGrp1[2] = 3;

var arrItems2 = new Array();
var arrItemsGrp2 = new Array();

arrItems2[21] = "747";
arrItemsGrp2[21] = 0
arrItems2[22] = "Cessna";
arrItemsGrp2[22] = 0

arrItems2[31] = "Kolb Flyer";
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox";
arrItemsGrp2[34] = 1

arrItems2[35] = "Schwietzer Glider";
arrItemsGrp2[35] = 2

arrItems2[99] = "Chevy Malibu";
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS";
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5

arrItems2[101] = "F-150";
arrItemsGrp2[101] = 3
arrItems2[102] = "Tahoe";
arrItemsGrp2[102] = 3

arrItems2[103] = "Freight Train";
arrItemsGrp2[103] = 4
arrItems2[104] = "Passenger Train";
arrItemsGrp2[104] = 4

arrItems2[105] = "Oil Tanker";
arrItemsGrp2[105] = 6
arrItems2[106] = "Fishing Boat";
arrItemsGrp2[106] = 6

arrItems2[200] = "Los Angelas Class";
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class";
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class";
arrItemsGrp2[203] = 7

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) ;
}
}
}
</script>

</HEAD>

<BODY>
<form name=myChoices>
<table align="center">
<tr>
<td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
<option value=0 SELECTED>[SELECT]</option>
<option value=1>Land</option>
<option value=2>Sea</option>
<option value=3>Air</option>
</SELECT>
</TD><TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
</TR>
</TABLE>
</form>

*********************************

Any idea how can I make it work for Netscape.

Thanks
Sanjay
sanjayv
05-22-2003, 10:10 AM
Folks,

Any Idea on how to make the above Javascript compatible with Netscape 4.7?

Regards
Sanjay:confused:
khalidali63
05-22-2003, 10:36 AM
The link I posted above pretty much does the same,it populates the third listbox with regards to the selection in the second list box.

the list box uses css property style.visibility = "visible or hidden";

you can change this to visible all the time for list box to be visible.
sanjayv
05-22-2003, 10:51 AM
Khalid

Thanks for a promt reply. Will this work with NS 4.7 also?

Cheers
Sanjay
khalidali63
05-22-2003, 10:58 AM
It doesn't at this time,( I don't create nything for NS <5 anymore),yes ofcourse it can be made to work with NS4.7

EDIT:
I have made it work with NS<5,
You may still have to work on lay out issues..
sanjayv
05-22-2003, 11:32 AM
Wow... That sounds great.. Thanks a lot.

Cheers
Sanjay
sanjayv
06-04-2003, 04:10 PM
Hi Folks

ANy idea how can I get the values into these boxes that are present in the script referred by Khalid, from a database table. I will be using Servlets to access the database and I can pass on that value to JSP but my question is that can I pass the same to teh Javascript also.

A prompt response is highly appreciable.

Regards
Sanjay:confused:
Khalid Ali
06-04-2003, 04:16 PM
No you can not directly intereact with servelt and javascript.
The only option you have is using jsp or servlet create the drop down....and once all is done and if you need to send these values back to the servlet..you want to use form submit or a pass value using url if its not huge number of data..
sanjayv
06-04-2003, 04:29 PM
Thanks Khalid..:)

SO can i say that I do not need Javascript in that case.

Regards
Sanjay:)
Khalid Ali
06-04-2003, 04:33 PM
if you are straigh forwarding the form using submit and not performing any other checking /processing on client side..yah,,,then you don't need it...

:D
sanjayv
06-04-2003, 04:52 PM
Khalid,

Thanks for a prompt reply.

Cheers
Sanjay:)