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 :-

Code:

<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

HTML Code:

<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...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

HTML Code:

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

HTML Code:

<!-- Paste this code into the HEAD section of your HTML document  -->
<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>

<!-- Paste this code into the BODY section of your HTML document  -->

<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>

Thread: A Drop-Down list problem

Thread Tools

Search Thread

A Drop-Down list problem

Bookmarks

Bookmarks

Posting Permissions