Populating two drop down menu using Ajax....

[Trium918]

 <form name=matchSelect method=post action=post.php onSubmit="if(this.amount=='Amount $') {alert('You must specify an amount!'); return false;} ">
<select name="systems" onChange="updategamesmatchSelect(this.selectedIndex)" style="width: 150px" class="tourn_input" id="console">
<option>Select A Console</option>
<option value="6" >Nintendo Wii</option>
<option value="7" >PC</option>
<option value="3" >Playstation 3</option>
<option value="15" >Playstation 4</option>
<option value="5" >Xbox 360</option>
<option value="16" >XBox One</option>
</select><select name="game" style="width:170px" class="tourn_input" id="game_input">
</select>
<script type="text/javascript">var systemlistmatchSelect=document.matchSelect.systems
var gameslistmatchSelect=document.matchSelect.game
var gamesmatchSelect=new Array()
gamesmatchSelect[0]=""
gamesmatchSelect[1]=["Mario Kart Wii|987"];
gamesmatchSelect[2]=["Call of Duty: Black Ops II |1695","Dota 2|1737","FIFA 13|1718","League of Legends|1705","Starcraft II|1429","Team Fortress 2|1156"];
gamesmatchSelect[3]=["Battlefield 4|1729","Call of Duty Ghosts|1733","Call of Duty: Black Ops II |1693","FIFA 13|1685","FIFA 14|1725","Grand Theft Auto V|1731","Injustice: Gods Among Us|1711","Madden NFL 13|1678","Madden NFL 25|1721","Major League Baseball 2K13|1700","MLB 13: The Show|1702","Mortal Kombat vs DC Universe|1146","NBA 2K13|1687","NBA 2K14|1727","NCAA Football 13|1672","NCAA Football 14|1716","NHL 13|1681","NHL 14|1723","Pro Evolution Soccer 2014|1750","Street Fighter IV|1167","Tekken Tag Tournament 2 |1683","Tiger Woods PGA Tour 14 |1707","WWE 2K14|1735"];
gamesmatchSelect[4]=["Battlefield 4|1741","Call of Duty Ghosts|1739","FIFA 14|1745","Injustice: Gods Among Us Ultimate Edition|1755","Madden NFL 25|1738","NBA 2K14|1743","NBA Live 14|1748","Need For Speed Rivals|1756"];
gamesmatchSelect[5]=["Battlefield 4|1730","Call of Duty Ghosts|1734","Call of Duty: Black Ops II |1694","FIFA 13|1686","FIFA 14|1726","Grand Theft Auto V|1732","Halo 4|1692","Injustice: Gods Among Us|1712","Madden NFL 13|1679","Madden NFL 25|1722","Major League Baseball 2K13|1701","Mortal Kombat vs DC Universe|1147","NBA 2K13|1688","NBA 2K14|1728","NCAA Football 13|1673","NCAA Football 14|1717","NHL 13|1682","NHL 14|1724","Pro Evolution Soccer 2014|1751","Street Fighter IV|1168","Tekken Tag Tournament 2 |1684","Tiger Woods PGA Tour 14 |1708","WWE 2K14|1736"];
gamesmatchSelect[6]=["Battlefield 4|1742","Call of Duty Ghosts|1740","FIFA 14|1746","Forza Motorsport 5|1754","Madden NFL 25|1747","NBA 2K14|1744","NBA Live 14|1749","Need For Speed Rivals|1757"];
function updategamesmatchSelect(selectedgamesgroup){
gameslistmatchSelect.options.length=0
if (selectedgamesgroup>0){
for (i=0; i<gamesmatchSelect[selectedgamesgroup].length; i++) 
gameslistmatchSelect.options[gameslistmatchSelect.options.length]=new Option(gamesmatchSelect[selectedgamesgroup][i].split("|")[0], gamesmatchSelect[selectedgamesgroup][i].split("|")[1])
}
}
</script>

<input name="amount" value="Amount $" size="8" maxlength="10" class="tourn_input" onFocus="this.className='tourn_input_focus'; if (this.value='Amount $') { this.value=''};" onBlur="this.className='tourn_input'"/><p style="padding:12px 0 0 0;">Comments:</P><textarea name="comments" rows="3" cols="57" class="tourn_input" id="comments" onFocus="this.className='tourn_input_focus'; if (this.value='Use this box to talk about rules, game play settings, preferred game time and availability. (i.e., Prefer to play Monday from 2-4 p.m.)') { this.value=''};" onBlur="this.className='tourn_input'">Use this box to talk about rules, game play settings, preferred game time and availability. (i.e., Prefer to play Monday from 2-4 p.m.)</textarea><br><input name=recipient value='BUMPGOOD904' type=hidden class=button /><input type='hidden' name='subject' value='Superian has challenged you.' class="button" /><p style="padding:12px 0 0 0;">
<input type="image" src='images/but_send_challenge.gif' class="button" onmouseover="this.src='images/but_send_challenge_ON.gif'" onmouseout="this.src='images/but_send_challenge.gif'" />
</p>



									</form>
         									

I am needing someone to point me in the right direction. I am trying to use Ajax to populate the drop down menu similar to what the programmer used in the code above. Correct me if I am wrong, but wouldn't the site load faster if the data for the (gamematchSelect) array is stored and pulled from the database? I just need to know how to populate the second drop down menu after the first Select Console is selected which is generated by the updategamesmatchSelect function when called.

[Psycho]

 

Correct me if I am wrong, but wouldn't the site load faster if the data for the (gamematchSelect) array is stored and pulled from the database?

 

 

You are wrong. Having the data loaded in the page and changing the drop-down via pure JavaScript will be much faster. There are pros and cons to doing this with just JavaScript or with AJAX. In this case, your list is small and would not change often. Therefore, writing the array into the JavaScript makes more sense.

[Trium918]

There are pros and cons to doing this with just JavaScript or with AJAX.

 

What are somethings that I can do to improve this code? Thanks..

Edited January 19, 2014 by Trium918