A Drop-Down list problem [Archive] - Dynamic Drive Forums

View Full Version : A Drop-Down list problem

JohnCF

05-05-2009, 12:48 PM

I have written a small bit of HTML code, which contains two drop-down lists. The first list contains 'Division 1' to 'Division 4', the second contains the teams in each of these divisions, which are displayed, when selecting the divisions this works ok.

My problem, is that when I run the mouse over the teams and click, I would like to display an html file, pertaining to that team. I am able to display the teams ok, but am just trying to sort out the html/javascript code to display the html file. I am getting there, but just thought I would ask to see if there any code examples, to solve my problem.

Nile

05-06-2009, 02:21 AM

Please post a link to the page on your site that contains the problematic script so we can check it out.
Please include your code so that we can take a look at it, we can't do much without it. When you do post your code remember to use [code] tags. That includes [ html ], [ code ], and [ php ].

Even know you're asking to see code examples, can we see you're code (stated above), to see what you've got, I also don't completely understand what you want. Please include your code, and explain a little better (the html part, not the drop down part).

forum_amnesiac

05-06-2009, 09:37 AM

I don't know if this is what you're looking for but it opens a new html page when an option is selected.

Put this in the <head> section :-

<script>
function team(teamurl){
window.open ("http://www.wherever.com/"+teamurl.value);
return;

}
</script>

Change 'http://www.wherever.com/' to the domain where the pages are located.

And do this for the SELECT box

<SELECT NAME="footteam" id="footteam" onChange="return team(this)">
<OPTION> Choose a team
<OPTION value="team1.htm"> Team1
<OPTION value="team2.htm"> Team2
<OPTION value="team3.htm"> Team3
<OPTION value="team4.htm"> Team4
<OPTION value="team5.htm"> Team5
</SELECT>

If the pages are not all in the same domain, my example is 'http://www.wherever.com/' then put the full address in the 'value=' box and remove that part from the function leaving just 'team.value'.

JohnCF

05-07-2009, 10:49 PM

Thanks,

I have already tried some suggestions, but it is not quite working. I have put my files on the web, as follows -

If you go to 'www.tvttl.co.uk/Drop-Down_List(examples)', you will see a html file called 'List.html'. (You may have to go to 'www.tvttl.co.uk/TV_General/Drop-Down_List(examples)' to see it, but it is in both locations.) You may have to download the files first, as running them from the ISP gave some odd results.

On executing this file, you will see three drop-down lists displayed, selecting each of the four options in the first list (LIST 1), will display different lists in the second drop-down list (LIST 2).

What I am trying to do, is by moving the cursor up & down the second list (LIST 2), is to trigger an 'ONCHANGE' option (or something similar), which will display an html file for each of the 32 teams, however I'm not sure how to select the correct file. The third list (LIST 3) works ok, but I have hard-coded it to work, for only the Division 1 teams listed here, but I do want it work, as per LIST 2.

Any suggestions?

(My main website is 'http://homepage.ntlworld.com/johnfairweather' - I can't see where to add this to my profile.)

JohnCF

05-10-2009, 05:55 PM

Still no reply, after 243 views, and after I posted a link to my problem on a website, as below.

forum_amnesiac

05-11-2009, 07:13 AM

I have had a look at your link and need some more information.

Currently it appears that if you click on one of the teams in list 2 it opens an html link to another page.

Are you not wanting it to work this way?

Are you wanting it to open the link on a mouseover, or an onfocus event.

Can you please explain further what you would like to see happen.

JohnCF

05-11-2009, 08:39 AM

Thanks,

There are 32 teams in List2, all displayed by selecting different Divisions in List1. By clicking (say ClickOn, or OnChange, as I have done) on each of these 32 teams, I want to display an html file, relating to the revelant team.

Currently, when I click on a team in List2, I seem to be displaying the wrong html file, ie. the html link is selecting the wrong file. I was wondering, whether it is an OnChange selection problem or something else?

Any suggestions?

forum_amnesiac

05-11-2009, 10:20 AM

On testing your code the problem is that it is always returning the value of "List2", not the value of the actual selection.

I think the problem is in how you are separating out the various leagues, probably in your "Teams_In_Divisions(Include_File).js"

I have found an auto populate script that will return the field value that you require, although there is a certain amount of change needed to make it fit.

This is the URL - http://javascript.internet.com/forms/country-state-drop-down.html

I have tested it out and you can add the URL of each team into the array and it does return that URL when selected.

If you need help altering the script then I will do this

forum_amnesiac

05-11-2009, 02:08 PM

I have adapted this code for you

Save the code as teams.js

var postTeam = '';
var postDivision = '';

// To edit the list, just delete a line or add a line. Order is important.
// The order displayed here is the order it appears on the drop down.

var team = '\
D1:Fixture_Lists/Division1_Deckers1_Fixtures.html:Deckers 1:Fixture_Lists/Division1_Deckers1_Fixtures.html|\
D1:Fixture_Lists/Division1_Rosehill1_Fixtures.html:Rosehill 1:Fixture_Lists/Division1_Rosehill1_Fixtures.html|\
D1:Fixture_Lists/Division1_GSpicer1_Fixtures.html:GSpicer 1:Fixture_Lists/Division1_GSpicer1_Fixtures.html|\
D1:Fixture_Lists/Division1_Molesey1_Fixtures.html:Molesey 1:Fixture_Lists/Division1_Molesey1_Fixtures.html|\
D1:Fixture_Lists/Division1_Chessington1_Fixtures.html:Chessington 1:Fixture_Lists/Division1_Chessington1_Fixtures.html|\
D1:Fixture_Lists/Division1_Teddington1_Fixtures.html:Teddington 1:Fixture_Lists/Division1_Teddington1_Fixtures.html|\
D1:Fixture_Lists/Division1_GSpicer2_Fixtures.html:GSpicer 2:Fixture_Lists/Division1_GSpicer2_Fixtures.html|\
D2:Fixture_Lists/Division2_Chessington3_Fixtures.html:Chessington 3:Fixture_Lists/Division2_Chessington3_Fixtures.html|\
D2:Fixture_Lists/Division2_Molesey2_Fixtures.html:Molesey 2:Fixture_Lists/Division2_Molesey2_Fixtures.html|\
D2:Fixture_Lists/Division2_NPL1_Fixtures.html:NPL 1:Fixture_Lists/Division2_NPL1_Fixtures.html|\
D2:Fixture_Lists/Division2_Teddington2_Fixtures.html:Teddington 2:Fixture_Lists/Division2_Teddington2_Fixtures.html|\
D2:Fixture_Lists/Division2_Alexandra1_Fixtures.html:Alexandra 1:Fixture_Lists/Division2_Alexandra1_Fixtures.html|\
D2:Fixture_Lists/Division2_Deckers2_Fixtures.html:Deckers 2:Fixture_Lists/Division2_Deckers2_Fixtures.html|\
D2:Fixture_Lists/Division2_Malden1_Fixtures.html:Malden 1:Fixture_Lists/Division2_Malden1_Fixtures.html|\
D2:Fixture_Lists/Division2_GSpicer3_Fixtures.html:GSpicer 3:Fixture_Lists/Division2_GSpicer3_Fixtures.html|\
D2:Fixture_Lists/Division2_Rosehill2_Fixtures.html:Rosehill 2:Fixture_Lists/Division2_Rosehill2_Fixtures.html|\
D2:Fixture_Lists/Division2_Chessington2_Fixtures.html:Chessington 2:Fixture_Lists/Division2_Chessington2_Fixtures.html|\
D3:Fixture_Lists/Division3_Alexandra3_Fixtures.html:Alexandra 3:Fixture_Lists/Division3_Alexandra3_Fixtures.html|\
D3:Division3_Alexandra2_Fixtures.html:Alexandra 2:Fixture_Lists/Division3_Alexandra2_Fixtures.html|\
D3:Fixture_Lists/Division3_GSpicer5_Fixtures.html:GSpicer 5:Fixture_Lists/Division3_GSpicer5_Fixtures.html|\
D3:Fixture_Lists/Division3_NPL2_Fixtures.html:NPL 2:Fixture_Lists/Division3_NPL2_Fixtures.html|\
D3:Fixture_Lists/Division3_Chessington4_Fixtures.html:Chessington 4:Fixture_Lists/Division3_Chessington4_Fixtures.html|\
D3:Fixture_Lists/Division3_Alexandra4_Fixtures.html:Alexandra 4:Fixture_Lists/Division3_Alexandra4_Fixtures.html|\
D3:Fixture_Lists/Division3_Teddington3_Fixtures.html:Teddington 3:Fixture_Lists/Division3_Teddington3_Fixtures.html|\
D4:Fixture_Lists/Division1_Malden2_Fixtures.html:Malden 2:Fixture_Lists/Division1_Malden2_Fixtures.html|\
D4:Fixture_Lists/Division1_Teddington5_Fixtures.html:Teddington 5:Fixture_Lists/Division1_Teddington5_Fixtures.html|\
D4:Fixture_Lists/Division1_Teddington4_Fixtures.html:Teddington 4:Fixture_Lists/Division1_Teddington4_Fixtures.html|\
D4:Fixture_Lists/Division1_Molesey3_Fixtures.html:Molesey 3:Fixture_Lists/Division1_Molesey3_Fixtures.html|\
D4:Fixture_Lists/Division1_Malden3_Fixtures.html:Malden 3:Fixture_Lists/Division1_Malden3_Fixtures.html|\
D4:Fixture_Lists/Division1_Alexandra5_Fixtures.html:Alexandra 5:Fixture_Lists/Division1_Alexandra5_Fixtures.html|\
D4:Fixture_Lists/Division1_GSpicer6_Fixtures.html:GSpicer 6:Fixture_Lists/Division1_GSpicer6_Fixtures.html|\
D4:Fixture_Lists/Division1_Molesey4_Fixtures.html4:Molesey 4:Fixture_Lists/Division1_Molesey4_Fixtures.html|\
';

// To edit the list, just delete a line or add a line. Order is important.
// The order displayed here is the order it appears on the drop down.
//
var division = '\
D1:Division 1|\
D2:Division 2|\
D3:Division 3|\
D4:Division 4|\
';

function TrimString(sInString) {
if ( sInString ) {
sInString = sInString.replace( /^\s+/g, "" );// strip leading
return sInString.replace( /\s+$/g, "" );// strip trailing
}
}

// Populates the division selected with the teams from the division list
function populateDivision(defaultDivision) {
if ( postDivision != '' ) {
defaultDivision = postDivision;
}
var divisionLineArray = division.split('|'); // Split into lines
var selObj = document.getElementById('divisionSelect');
selObj.options[0] = new Option('Select Division','');
selObj.selectedIndex = 0;
for (var loop = 0; loop < divisionLineArray.length; loop++) {
lineArray = divisionLineArray[loop].split(':');
divisionCode = TrimString(lineArray[0]);
divisionName = TrimString(lineArray[1]);
if ( divisionCode != '' ) {
selObj.options[loop + 1] = new Option(divisionName, divisionCode);
}
if ( defaultDivision == divisionCode ) {
selObj.selectedIndex = loop + 1;
}
}
}

function populateTeam() {
var selObj = document.getElementById('teamSelect');
var foundTeam = false;
// Empty options just in case new drop down is shorter
if ( selObj.type == 'select-one' ) {
for (var i = 0; i < selObj.options.length; i++) {
selObj.options[i] = null;
}
selObj.options.length=null;
selObj.options[0] = new Option('Select Team','');
selObj.selectedIndex = 0;
}
// Populate the drop down with teams from the selected division
var teamLineArray = team.split("|"); // Split into lines
var optionCntr = 1;
for (var loop = 0; loop < teamLineArray.length; loop++) {
lineArray = teamLineArray[loop].split(":");
divisionCode = TrimString(lineArray[0]);
teamCode = TrimString(lineArray[1]);
teamName = TrimString(lineArray[2]);
teamValue = TrimString(lineArray[3]);
if (document.getElementById('divisionSelect').value == divisionCode && divisionCode != '' ) {
// If it's a input element, change it to a select
if ( selObj.type == 'text' ) {
parentObj = document.getElementById('teamSelect').parentNode;
parentObj.removeChild(selObj);
var inputSel = document.createElement("SELECT");
inputSel.setAttribute("name","team");
inputSel.setAttribute("id","teamSelect");
inputSel.setAttribute("value","teamValue");
parentObj.appendChild(inputSel) ;
selObj = document.getElementById('teamSelect');
selObj.options[0] = new Option('Select Team','');
selObj.selectedIndex = 0;
}
if ( teamCode != '' ) {
selObj.options[optionCntr] = new Option(teamName, teamCode);
}
// See if it's selected from a previous post
if ( teamCode == postTeam && divisionCode == postDivision ) {
selObj.selectedIndex = optionCntr;
}
foundTeam = true;
optionCntr++
}
}
// If the division has no teams, change the select to a text box
if ( ! foundTeam ) {
parentObj = document.getElementById('teamSelect').parentNode;
parentObj.removeChild(selObj);
// Create the Input Field
var inputEl = document.createElement("INPUT");
inputEl.setAttribute("id", "teamSelect");
inputEl.setAttribute("type", "text");
inputEl.setAttribute("name", "team");
inputEl.setAttribute("size", 20);
inputEl.setAttribute("value", postTeam);
parentObj.appendChild(inputEl) ;
}
}

function initDivision(division) {
populateDivision(division);
populateTeam();
}

The HTML is in the next post

forum_amnesiac

05-11-2009, 02:11 PM

Here is the HTML that uses the above javascript


<script type="text/javascript" src="teams.js"></script>
<script>
function findteam(teamurl){
window.open ("http://www.tvttl.co.uk/Drop-Down_List(examples)/"+teamurl.value);
return;
}
</script>



<form>
<table border="0">
<tr>
<td>
<select id='divisionSelect' name='division' onchange='populateTeam()'>
</select>
</td>
<td>
<select id='teamSelect' name='team' onchange="findteam(this)">
</select>
<script type="text/javascript">initDivision('D1'); </script>
</td>
</tr>
</table>
</form>

JohnCF

05-11-2009, 03:00 PM

Thanks for taking the trouble, I will have a look at the code and let you know how I get on.

Regards,

John

forum_amnesiac

05-13-2009, 03:35 PM

Did the code work?

JohnCF

05-13-2009, 10:35 PM

Thanks,

I merged your code with my code, just to start off with, correcting a bit of the code. I have uploaded it, as 'List1.html' into my on-line webpage section.

I have run it, but there are some corrections required, as you can see, if you run it.

forum_amnesiac

05-14-2009, 07:12 AM

I have looked at the code you've put on your site, it has a few mistakes.

Try this, it is an HTML document you can amend later.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head><title>Clubs's Fixtures(2008-9)</title>

<script type="text/javascript" src="teams.js"></script>
<script>
function team(teamurl){
alert("name="+teamurl.name+" value ="+teamurl.value+" id = "+teamurl.id);
return;
window.open ("http://www.tvttl.co.uk/Drop-Down_List(examples)/"+teamurl.value);
return;
}
</script>

</head>

<body>

<form>
<table border="0" width="100%">
<tr>
<td>
<select id='divisionSelect' name='division' onchange='populateDivision()'>
</select>
</td>
<td>
<select id='teamSelect' name='team' onchange="team(this)">
</select>
<script type="text/javascript">initDivision('D1'); </script>
</td>
</tr>
</table>
</form>

</body>
</html>

Save this as List2.html to your site and try it, if it works then you can amend it for style, additional content, etc.

Let me know how it goes

JohnCF

05-14-2009, 01:46 PM

Thanks, I have a go tonight (when I get home, from work) and let you know how I get on.

I'm afraid work and going away this weekend, to play Table Tennis in Bristol, might limit my chances of giving it my full attention, but I will have a go.

JohnCF

05-14-2009, 10:39 PM

Ok, I had a look and saved it as 'List2.html' and ran it. However, it doesn't seem to be picking up the teams.

forum_amnesiac

05-15-2009, 05:40 AM

Sorry, I posted the wrong js file, save this as teams1.js

var postTeam = '';
var postDivision = '';

// To edit the list, just delete a line or add a line. Order is important.
// The order displayed here is the order it appears on the drop down.

var team = '\
D1:Fixture_Lists/Division1_Deckers1_Fixtures.html:Deckers 1:Fixture_Lists/Division1_Deckers1_Fixtures.html|\
D1:Fixture_Lists/Division1_Rosehill1_Fixtures.html:Rosehill 1:Fixture_Lists/Division1_Rosehill1_Fixtures.html|\
D1:Fixture_Lists/Division1_GSpicer1_Fixtures.html:GSpicer 1:Fixture_Lists/Division1_GSpicer1_Fixtures.html|\
D1:Fixture_Lists/Division1_Molesey1_Fixtures.html:Molesey 1:Fixture_Lists/Division1_Molesey1_Fixtures.html|\
D1:Fixture_Lists/Division1_Chessington1_Fixtures.html:Chessington 1:Fixture_Lists/Division1_Chessington1_Fixtures.html|\
D1:Fixture_Lists/Division1_Teddington1_Fixtures.html:Teddington 1:Fixture_Lists/Division1_Teddington1_Fixtures.html|\
D1:Fixture_Lists/Division1_GSpicer2_Fixtures.html:GSpicer 2:Fixture_Lists/Division1_GSpicer2_Fixtures.html|\
D2:Fixture_Lists/Division2_Chessington3_Fixtures.html:Chessington 3:Fixture_Lists/Division2_Chessington3_Fixtures.html|\
D2:Fixture_Lists/Division2_Molesey2_Fixtures.html:Molesey 2:Fixture_Lists/Division2_Molesey2_Fixtures.html|\
D2:Fixture_Lists/Division2_NPL1_Fixtures.html:NPL 1:Fixture_Lists/Division2_NPL1_Fixtures.html|\
D2:Fixture_Lists/Division2_Teddington2_Fixtures.html:Teddington 2:Fixture_Lists/Division2_Teddington2_Fixtures.html|\
D2:Fixture_Lists/Division2_Alexandra1_Fixtures.html:Alexandra 1:Fixture_Lists/Division2_Alexandra1_Fixtures.html|\
D2:Fixture_Lists/Division2_Deckers2_Fixtures.html:Deckers 2:Fixture_Lists/Division2_Deckers2_Fixtures.html|\
D2:Fixture_Lists/Division2_Malden1_Fixtures.html:Malden 1:Fixture_Lists/Division2_Malden1_Fixtures.html|\
D2:Fixture_Lists/Division2_GSpicer3_Fixtures.html:GSpicer 3:Fixture_Lists/Division2_GSpicer3_Fixtures.html|\
D2:Fixture_Lists/Division2_Rosehill2_Fixtures.html:Rosehill 2:Fixture_Lists/Division2_Rosehill2_Fixtures.html|\
D2:Fixture_Lists/Division2_Chessington2_Fixtures.html:Chessington 2:Fixture_Lists/Division2_Chessington2_Fixtures.html|\
D3:Fixture_Lists/Division3_Alexandra3_Fixtures.html:Alexandra 3:Fixture_Lists/Division3_Alexandra3_Fixtures.html|\
D3:Division3_Alexandra2_Fixtures.html:Alexandra 2:Fixture_Lists/Division3_Alexandra2_Fixtures.html|\
D3:Fixture_Lists/Division3_GSpicer5_Fixtures.html:GSpicer 5:Fixture_Lists/Division3_GSpicer5_Fixtures.html|\
D3:Fixture_Lists/Division3_NPL2_Fixtures.html:NPL 2:Fixture_Lists/Division3_NPL2_Fixtures.html|\
D3:Fixture_Lists/Division3_Chessington4_Fixtures.html:Chessington 4:Fixture_Lists/Division3_Chessington4_Fixtures.html|\
D3:Fixture_Lists/Division3_Alexandra4_Fixtures.html:Alexandra 4:Fixture_Lists/Division3_Alexandra4_Fixtures.html|\
D3:Fixture_Lists/Division3_Teddington3_Fixtures.html:Teddington 3:Fixture_Lists/Division3_Teddington3_Fixtures.html|\
D4:Fixture_Lists/Division1_Malden2_Fixtures.html:Malden 2:Fixture_Lists/Division1_Malden2_Fixtures.html|\
D4:Fixture_Lists/Division1_Teddington5_Fixtures.html:Teddington 5:Fixture_Lists/Division1_Teddington5_Fixtures.html|\
D4:Fixture_Lists/Division1_Teddington4_Fixtures.html:Teddington 4:Fixture_Lists/Division1_Teddington4_Fixtures.html|\
D4:Fixture_Lists/Division1_Molesey3_Fixtures.html:Molesey 3:Fixture_Lists/Division1_Molesey3_Fixtures.html|\
D4:Fixture_Lists/Division1_Malden3_Fixtures.html:Malden 3:Fixture_Lists/Division1_Malden3_Fixtures.html|\
D4:Fixture_Lists/Division1_Alexandra5_Fixtures.html:Alexandra 5:Fixture_Lists/Division1_Alexandra5_Fixtures.html|\
D4:Fixture_Lists/Division1_GSpicer6_Fixtures.html:GSpicer 6:Fixture_Lists/Division1_GSpicer6_Fixtures.html|\
D4:Fixture_Lists/Division1_Molesey4_Fixtures.html4:Molesey 4:Fixture_Lists/Division1_Molesey4_Fixtures.html|\
';

// To edit the list, just delete a line or add a line. Order is important.
// The order displayed here is the order it appears on the drop down.
//
var division = '\
D1:Division 1|\
D2:Division 2|\
D3:Division 3|\
D4:Division 4|\
';

function TrimString(sInString) {
if ( sInString ) {
sInString = sInString.replace( /^\s+/g, "" );// strip leading
return sInString.replace( /\s+$/g, "" );// strip trailing
}
}

// Populates the division selected with the teams from the division list
function populateDivision(defaultDivision) {
if ( postDivision != '' ) {
defaultDivision = postDivision;
}
var divisionLineArray = division.split('|'); // Split into lines
var selObj = document.getElementById('divisionSelect');
selObj.options[0] = new Option('Select Division','');
selObj.selectedIndex = 0;
for (var loop = 0; loop < divisionLineArray.length; loop++) {
lineArray = divisionLineArray[loop].split(':');
divisionCode = TrimString(lineArray[0]);
divisionName = TrimString(lineArray[1]);
if ( divisionCode != '' ) {
selObj.options[loop + 1] = new Option(divisionName, divisionCode);
}
if ( defaultDivision == divisionCode ) {
selObj.selectedIndex = loop + 1;
}
}
}

function populateTeam() {
var selObj = document.getElementById('teamSelect');
var foundTeam = false;
// Empty options just in case new drop down is shorter
if ( selObj.type == 'select-one' ) {
for (var i = 0; i < selObj.options.length; i++) {
selObj.options[i] = null;
}
selObj.options.length=null;
selObj.options[0] = new Option('Select Team','');
selObj.selectedIndex = 0;
}
// Populate the drop down with teams from the selected division
var teamLineArray = team.split("|"); // Split into lines
var optionCntr = 1;
for (var loop = 0; loop < teamLineArray.length; loop++) {
lineArray = teamLineArray[loop].split(":");
divisionCode = TrimString(lineArray[0]);
teamCode = TrimString(lineArray[1]);
teamName = TrimString(lineArray[2]);
teamValue = TrimString(lineArray[3]);
if (document.getElementById('divisionSelect').value == divisionCode && divisionCode != '' ) {
// If it's a input element, change it to a select
if ( selObj.type == 'text' ) {
parentObj = document.getElementById('teamSelect').parentNode;
parentObj.removeChild(selObj);
var inputSel = document.createElement("SELECT");
inputSel.setAttribute("name","team");
inputSel.setAttribute("id","teamSelect");
inputSel.setAttribute("value","teamValue");
parentObj.appendChild(inputSel) ;
selObj = document.getElementById('teamSelect');
selObj.options[0] = new Option('Select Team','');
selObj.selectedIndex = 0;
}
if ( teamCode != '' ) {
selObj.options[optionCntr] = new Option(teamName, teamCode);
}
// See if it's selected from a previous post
if ( teamCode == postTeam && divisionCode == postDivision ) {
selObj.selectedIndex = optionCntr;
}
foundTeam = true;
optionCntr++
}
}
// If the division has no teams, change the select to a text box
if ( ! foundTeam ) {
parentObj = document.getElementById('teamSelect').parentNode;
parentObj.removeChild(selObj);
// Create the Input Field
var inputEl = document.createElement("INPUT");
inputEl.setAttribute("id", "teamSelect");
inputEl.setAttribute("type", "text");
inputEl.setAttribute("name", "team");
inputEl.setAttribute("size", 20);
inputEl.setAttribute("value", postTeam);
parentObj.appendChild(inputEl) ;
}
}

function initDivision(division) {
populateDivision(division);
populateTeam();
}

And use save this as an HTML file

<script type="text/javascript" src="teams1.js"></script>
<script>
function findteam(teamurl){
window.open ("http://www.tvttl.co.uk/Drop-Down_List(examples)/"+teamurl.value);
return;
}
</script>



<form>
<table border="0">
<tr>
<td>
<select id='divisionSelect' name='division' onchange='populateTeam()'>
</select>
</td>
<td>
<select id='teamSelect' name='team' onchange="findteam(this)">
</select>
<script type="text/javascript">initDivision('D1'); </script>
</td>
</tr>
</table>
</form>
This is definitely working for me

JohnCF

05-15-2009, 09:18 AM

Thanks, but I won't be able to run it until Sunday night now - I'll try and let you know then.

JohnCF

05-15-2009, 09:27 AM

There is a typo error in my 'D4' teams (below), by me, 'Division1' should read 'Division4' and 'Alexandra2' (in 'D3') needs amending.

forum_amnesiac

05-15-2009, 04:22 PM

To amend the information about which teams are in which division and the URL's that say where their fixtures lists are, you just need to edit the information in the teams1.js file.

If you look inside that file you will see the structure for each division and team and that should give you a good idea of what to do to make any alterations.

If you have a problem just ask

JohnCF

05-18-2009, 10:08 PM

Thanks, but a minor linking/display problem to sort out - Files (Team1.js, List3,html, List4.html) are in my area.

forum_amnesiac

05-19-2009, 07:22 AM

Not sure I understand what the problem is, if you still have a problem getting this to work then I can email my 2 files, the .html and the .js, to you.

Let me know

JohnCF

05-19-2009, 11:41 AM

Please do e-mail me, via my Contact Info. I should have a bit more time tonight, to think about things and try and put this to bed.

JohnCF

05-28-2009, 10:33 PM

I have now solved this problem, with help (as you can see), from forum_amnesiac, who I would like to thank, as he put a lot of effort into it.

If anybody would like to see it in action, please go to www.tvttl.co.uk, under 'Latest News'.