The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> combobox child, Need help
peterherbert
post Nov 15 2015, 01:34 PM
Post #1





Group: Members
Posts: 1
Joined: 15-November 15
Member No.: 23,743
Hello all. I have the following code that genarates a child box.. But i need another one for me to display Outward Terminal/Inward Terminal. Can anyone point me in the right direction. Many thanks.

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e) {return document.getElementById(e);}

function airportComboChange()
{
var combo1 = byId('airportCombo');
var combo2 = byId('termCombo');
// alert(combo1.value);

emptyCombo(combo2);
switch(combo1.value)
{
case '-1': addOption(combo2, -1, 'select airport first');
break;
case '0': addOption(combo2, 0, 'Terminal 1');
addOption(combo2, 1, 'Terminal 2');
addOption(combo2, 2, 'Terminal 3');
addOption(combo2, 3, 'Terminal 4');
addOption(combo2, 4, 'Terminal 5');
break;
case '1': addOption(combo2, 5, 'North');
addOption(combo2, 6, 'South');
break;
case '2': addOption(combo2, 7, 'Main');
break;
case '3': addOption(combo2, 8, 'Main');
break;
case '4': addOption(combo2, 9, 'Terminal 1');
addOption(combo2, 10, 'Terminal 2');
addOption(combo2, 11, 'Terminal 3');
break;
case '5': addOption(combo2, 12, 'Main');
break;
case '6': addOption(combo2, 13, 'Main');
break;
case '7': addOption(combo2, 13, 'Main');
break;
case '8': addOption(combo2, 14, 'Main');
break;
case '9': addOption(combo2, 15, 'Main');
break;
case '10': addOption(combo2, 16, 'Main');
break;
case '11': addOption(combo2, 17, 'Main');
break;
case '12': addOption(combo2, 18, 'Main');
break;
case '13': addOption(combo2, 19, 'Main');
break;
case '14': addOption(combo2, 20, 'Main');
break;
case '15': addOption(combo2, 21, 'Main');
break;
}
termComboChange();
}

function termComboChange()
{
var combo2, tgt;
combo2 = byId('termCombo');
tgt = byId('tgt');

tgt.innerHTML = combo2.options[combo2.options.selectedIndex].title;
}

function emptyCombo(e)
{
e.innerHTML = '';
}

function addOption(combo, val, txt)
{
var option = document.createElement('option');
option.value = val;
option.title = txt;
option.appendChild(document.createTextNode(txt));
combo.appendChild(option);
}

</script>
</head>
<body>
<select id='airportCombo' onchange='airportComboChange();'>
<option value='-1' title='-select one-'>Departure Airport</option>
<option value='0' title='LHR'>London Heathrow - LHR</option>
<option value='1' title='LGW'>London Gatwick - LGW</option>
<option value='2' title='LTN'>London Luton - LTN</option>
<option value='3' title='STN'>London Stanstead - STN</option>
<option value='4' title='MAN'>Manchester - MAN</option>
<option value='5' title='EDI'>Edinburgh - EDI</option>
<option value='6' title='BHX'>Birmingham International - BHX</option>
<option value='7' title='GLA'>Glasgow International - GLA</option>
<option value='8' title='BRS'>Bristol International - BRS</option>
<option value='9' title='LPL'>Liverpool John Lennon – LPL</option>
<option value='10' title='NCL'>Newcastle - NCL</option>
<option value='11' title='BFS'>Belfast - BFS</option>
<option value='12' title='EMA'>East Midlands - EMA</option>
<option value='13' title='ABZ'>Aberdeen Dyce - ABZ</option>
<option value='14' title='LBA'>Leeds Bradford - LBA</option>
<option value='15' title='SOU'>Southampton - SOU</option>
</select>

<select id='termCombo' onchange='termComboChange();'>
<option value='-1' title='-select state first-'>Terminal</option>
</select>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Nov 16 2015, 01:42 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088
After looking through your code I don't see how it runs in the first place. I see you want to add specific terminals to the 'termCombo' select depending on the selection you make in 'airportCombo'. When you want to empty the 'termCombo' select you make a call to 'emptyCombo(combo2)' but in that function you use 'e.innerHTML = ''', which is wrong. You can't clear the contents of a select drop down this way, you must set the select length to 0. Another problem is with this function 'termComboChange()'. The way I read the code is that 'tgt' will always be null. The reason is this 'tgt = byId('tgt')', there is to element id with 'tgt'.

Am I reading the code wrong or have you left out something?

This post has been edited by CharlesEF: Nov 16 2015, 01:47 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 09:45 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC