/    Sign up×
Community /Pin to ProfileBookmark

JavaScript experts: help with drop down box please.

Hi, I’m new to this forum and this is my first post.
I’ve found this code and I’d like to add one function to it.

Anybody knows how to add a function to the third box so that the selected options can load a page in iframe inside the parent page?

here’s the code.

[code]
<!– TWO STEPS TO INSTALL DROPDOWN BOX POPULATION:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document –>

<!– STEP ONE: Paste this code into the HEAD of your HTML document –>

<HEAD>

<script type=”text/javascript”>
<!–
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Revised by: DeWayne Whitaker :: http://www.aecdfw.com
Original by: Andrew Berry */

var arrItems1 = new Array();
var arrItemsGrp1 = new Array();

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

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;

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] = “<a href=’index.html’>Seawolf Class</a>”;
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>

<!– STEP TWO: Copy this code into the BODY of your HTML document –>

<BODY>
<script type=”text/javascript”>

function goToPage763(mySelect)

{

PageIndex2=mySelect.selectedIndex;

{

if

(

mySelect.options[PageIndex2].value != “none”

)

{

//this is the key code in the JavaScript to open the new page in

//the iframe:-

frames[‘iframe2’].location.href = mySelect.options[PageIndex2].value;

}

}

}

//–>

</script>
<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>
[/code]

Thanks in advance.

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @Sam80 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...