0

I'm here to ask you for advice everyone. What I'm trying to do is, once you choose Team, you get list of players in another list. Code is working OK. Please tell me, would you do this code in a different way? Maybe to make it a bit shorter, as if there would be ~12 players, code would be very long for this simple task. Is there anything else, where I could improve? Thank you.

<body>
<form>
    <select id="teams" onchange="showPlayer();">
        <option>Team 1992</option>
        <option>Team 2003</option>
        <option>Team 2013</option>
    </select>
    <select>
        <option id="player1">First</option>
        <option id="player2">Second</option>
    </select>
</form>


var team2013 = ['Cowboy', 'Puppet'];
    var team2003 = ['Mr. Star', 'Awesome'];
    var team1992 = ['Mr. Amazing', 'Unstopable'];

    function showPlayer(){
        var selection = document.getElementById('teams');
        var opt = selection.options[selection.selectedIndex];
        switch(selection.options.value){
            case 'Team 1992':
                document.getElementById('player1').innerHTML = team1992[0];
                document.getElementById('player2').innerHTML = team1992[1];
                break;
            case 'Team 2003':
                document.getElementById('player1').innerHTML = team2003[0];
                document.getElementById('player2').innerHTML = team2003[1];
                break;
            case 'Team 2013':
                document.getElementById('player1').innerHTML = team2013[0];
                document.getElementById('player2').innerHTML = team2013[1];
                break;
            default: alert('must choose')
        }
    }
MrPaulius
  • 107
  • 1
  • 3
  • 10
  • Not optimal at all. There are hundreds of better versions here at SO – mplungjan Sep 21 '13 at 18:20
  • I'm sure there is, I have tried to look for one, unfortunately I couldnt find one. Thats why asked a Q. – MrPaulius Sep 21 '13 at 20:29
  • Depending on your team size you may be better off simply showing another select and hiding the other depending on selectedIndex of the first select. style.display="none" vs "block" – mplungjan Sep 21 '13 at 20:35
  • Check this [post](https://stackoverflow.com/questions/14661508/jquery-select-changes-another-select). The most common example of what you want to do is changing states depending on the selected country. – Ricardo Nuñez Sep 21 '13 at 18:25
  • This example is with jQuery, I'm still trying to figure out JS :) . I've tried to find more optimal version. Other examples are either with jQuery or where people show how to change one item on selection. And I need to change more than 1. – MrPaulius Sep 21 '13 at 20:26

0 Answers0