SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    london
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with dropdown auto fill script

    I found a script on Javascriptsource.com (http://javascript.internet.com/forms...drop-down.html) which is working quite well so far for what I need.

    But, now I am running into some problems. The script came with names and numbers in the arrays, but now when I replace the values with my own.... both being names, the script will not load properly any longer. I have tried using quotes but still it will not work.

    Here is what I have for example....

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Original:  Jerome Caron (jerome.caron@globetrotter.net) -->
    
    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->
    
    <!-- Begin
    model = new Array(
    new Array(
    new Array("Alouette", Alouette),
    new Array("Alouette II", Alouette II),
    new Array("Alouette III", Alouette III),
    new Array("Cougar", Cougar) 
    ),
    new Array(
    new Array("A103", A103),
    new Array("A104", A104),
    new Array("A105", A105),
    new Array("A106", A106),
    new Array("A109", A109),
    new Array("A115", A115) 
    ),
    null,
    new Array(
    new Array("Alexei Yashin", 20394802),
    new Array("Daniel Alfredson", 34982039),
    new Array("Marian Hossa", 92348902),
    new Array("Patrick Lalime", 98203894),
    new Array("Radek Bonk", 98234902)
    )
    );
    function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem) {
    var i, j;
    var prompt;
    // empty existing items
    for (i = selectCtrl.options.length; i >= 0; i--) {
    selectCtrl.options[i] = null; 
    }
    prompt = (itemArray != null) ? goodPrompt : badPrompt;
    if (prompt == null) {
    j = 0;
    }
    else {
    selectCtrl.options[0] = new Option(prompt);
    j = 1;
    }
    if (itemArray != null) {
    // add new items
    for (i = 0; i < itemArray.length; i++) {
    selectCtrl.options[j] = new Option(itemArray[i][0]);
    if (itemArray[i][1] != null) {
    selectCtrl.options[j].value = itemArray[i][1]; 
    }
    j++;
    }
    // select first item (prompt) for sub list
    selectCtrl.options[0].selected = true;
       }
    }
    //  End -->
    </script>
    You can see in the third grouping the numbers after the player names - if I were to do numbers where they are now, all works fine. But i need to use text like in the first two arrays.

    Any ideas?

    This is the select statement which drives it...

    Code:
    <SELECT NAME="Make" onChange="fillSelectFromArray(this.form.Model, ((this.selectedIndex == -1) ? null : model[this.selectedIndex-1]));">

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi dutton,

    Try this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type='text/javascript'>
    var team = [
      [
        ["Saku Koivu", "pn39482304"],
        ["Martin Rucinsky", "pn34802389"],
        ["Jeff Hackett", "pn39823498"],
        ["Sheldon Sourray", "pn87587343"],
        ["Richard Zednik", "pn68798735"],
        ["Brian Savage", "pn98098509"],
        ["Stephane Robidas", "pn49490583"],
        ["Patrice Brisebois", "pn32898334"],
        ["Oleg Petrov", "pn92340934"],
        ["Chad Kilger", "pn34923409"],
        ["Benoit Brunet", "pn59384093"],
        ["Jan Bulis", "pn83948023"],
        ["Patrick Traverse", "pn41239812"],
        ["Jose Theodore", "pn98402398"],
        ["Craig Darby", "pn82393434"],
        ["Patric Poulin", "pn34290348"],
        ["Karl Dykhuis", "pn89092834"]
      ],
      [
        ["Mario Lemieux", "pn23840238"],
        ["Jaromir Jagr", "pn92390484"],
        ["Robert Lang", "pn29048203"],
        ["Alexei Kovalev", "pn94098230"],
        ["Jean-Sebastien Aubin", "pn39234923"],
        ["Kevin Stevens", "pn29345423"]
      ],
      null, // no players for Toronto Maple Leafs
      [
        ["Alexei Yashin", "pn20394802"],
        ["Daniel Alfredson", "pn34982039"],
        ["Marian Hossa", "pn92348902"],
        ["Patrick Lalime", "pn98203894"],
        ["Radek Bonk", "pn98234902"]
      ]
    ];
    
    // Original: Jerome Caron (jerome.caron@globetrotter.net)
    // http://javascript.internet.com/forms/auto-drop-down.html
    
    function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem)
    {
      var i, j;
      var prompt;
      // empty existing items
      for (i = selectCtrl.options.length; i >= 0; i--) {
        selectCtrl.options[i] = null; 
      }
      prompt = (itemArray != null) ? goodPrompt : badPrompt;
      if (prompt == null) {
        j = 0;
      }
      else {
        selectCtrl.options[0] = new Option(prompt);
        j = 1;
      }
      if (itemArray != null) {
        // add new items
        for (i = 0; i < itemArray.length; i++) {
          selectCtrl.options[j] = new Option(itemArray[i][0]);
          if (itemArray[i][1] != null) {
            selectCtrl.options[j].value = itemArray[i][1]; 
          }
          j++;
        }
        // select first item (prompt) for sub list
        selectCtrl.options[0].selected = true;
      }
    }
    </script>
    </head>
    <body>
    
    <FORM NAME="main">
    <SELECT NAME="Make" onchange="fillSelectFromArray(this.form.Team, ((this.selectedIndex == -1) ? null : team[this.selectedIndex-1]), 'Select Player', 'None Available');">
    <OPTION VALUE="-1">Select Team
    <OPTION VALUE=1>Montreal Canadiens
    <OPTION VALUE=2>Pittsburg Penguins
    <OPTION VALUE=3>Toronto Maple Leafs
    <OPTION VALUE=4>Ottawa Senators
    </SELECT>
    <BR>
    <SELECT NAME="Team" SIZE="5" onchange="alert(this.options[this.selectedIndex].value)">
    <OPTION>**********************************</OPTION>
    <OPTION>**********************************</OPTION>
    <OPTION>**********************************</OPTION>
    <OPTION>**********************************</OPTION>
    <OPTION>**********************************</OPTION>
    </SELECT>
    </FORM>
    
    </body>
    </html>
    And here's another way to do it: xSelect


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •