cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

how to select an item from dropdownbox

Go to solution
Former Member

on ‎2005 Nov 10 3:07 PM

0 Kudos
75

Hi all

I have two dropdownlistbox. When I select an item in the first box,according to the selection, I have to add items in the second dropdownlistbox. I want the implementation of the onClientSelect="javascript:Sample();" of the first dropdownbox "drop1" using

<script>

function Sample(){

//I want the implementation to be done here

}

</script>

in my jsp.

How do I additem to the second dropdownbox "drop2" inside the script tag?Please help me with this.

Thanks in advance

Regards

Harini S

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
‎2005 Nov 10 3:34 PM
0 Kudos

If you want to populate the second box in the javascript, iam giving you a working sample that might get you started.

If you are playing with htmlb and want the second dropdown to be populated with values from database, then you shud pass the selected value to Dynpage and process it!

<b>SAMPLE Javascript for multiple dropdown boxes:</b>

<HEAD>

<script type="text/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=form.thirdChoice.options.length;q>=0;q--) form.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) ;

controlToPopulate.appendChild(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.setAttribute('value',x);

// myEle.text = ItemArray[x] ;

var txt = document.createTextNode(ItemArray[x]);

myEle.appendChild(txt)

// controlToPopulate.add(myEle) ;

controlToPopulate.appendChild(myEle)

}

}

}

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=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;

}

// ADD Default Choice - in case there are no values

myEle=document.createElement("option");

theText=document.createTextNode("[SELECT]");

myEle.appendChild(theText);

myEle.setAttribute("value","0");

controlToPopulate.appendChild(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.setAttribute("value",x);

// myEle.text = ItemArray[x] ;

var txt = document.createTextNode(ItemArray[x]);

myEle.appendChild(txt)

// controlToPopulate.add(myEle) ;

controlToPopulate.appendChild(myEle)

}

}

}

</script>

</HEAD>

<BODY>

<form name=form>

<table align="center">

<tr>

<td>

<select id="firstChoice" name="firstChoice" onchange="selectChange(this, form.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, form.thirdChoice, arrItems2, arrItemsGrp2);">

</select>

<select id="thirdChoice" name="thirdChoice">

</select>

</td>

</tr>

</table>

</form>

Show replies
Show replies
Former Member
‎2005 Nov 11 10:02 AM
0 Kudos

Hi Peter

Your answer is helpful.But I want to use htmlb.Can you give me the implementation related to that?Please help me with this.

Regards

Harini S

Answers (1)

Answers (1)

Former Member
‎2005 Nov 11 10:39 AM
0 Kudos

Hi Harini

check the following link to get an idea.

Regards,

Yoga

Show replies
Show replies
Ask a Question