Sort a list without refreshing the page

I 开发者_StackOverflow社区have the following code:

  <table border="0" width="100%"><tbody>
     <tr>
        <th style="text-align: center;"><?php echo $text['PLAYERS']; ?></th>
     </tr>
     <tr>
        <td>
        <select name="order" size="1" onchange="sortPlayers(this)">
           <option value="name"><?php echo $text['NAME']; ?></option>
           <option value="age"><?php echo $text['AGE']; ?></option>
           <option value="ss"><?php echo $text['SS']; ?></option>
           <option value="experience"><?php echo $text['EXPERIENCE']; ?></option>
           <option value="leadership"><?php echo $text['LEADERSHIP']; ?></option>            
           <option value="weight"><?php echo $text['WEIGHT']; ?></option>             
           <option value="height"><?php echo $text['HEIGHT']; ?></option>       
           <option value="stamina"><?php echo $text['STAMINA']; ?></option>             
           <option value="strength"><?php echo $text['STRENGTH']; ?></option>             
           <option value="breakthroughs"><?php echo $text['BREAKTHROUGHS']; ?></option>
           <option value="tackling"><?php echo $text['TACKLING']; ?></option>
           <option value="handling"><?php echo $text['HANDLING']; ?></option>             
           <option value="speed"><?php echo $text['SPEED']; ?></option>
           <option value="kicking"><?php echo $text['KICKING']; ?></option>
        </select>
        </td>
     </tr>   
     <?php foreach ($result as $player) { ?>
     <tr>
        <td style="text-align: left;"><?php echo $player['male'] . ' ' . $player['name']; ?></td>
     </tr>
     <?php } ?>
  </tbody></table>

It generates a list with every users players in a online game. I want that when user selects something from the dropdown menu, players are sorted by what has been selected (strength, speed, etc.). I have a function to get the players: get_players ($ tid, $ sort). $tid = user id $sort = sorting criteria (speed, kicking, etc.).

What is JavaScript code to get what is selected in that input and change the variable $result depending on the selection in that input, but without refreshing the page.

If I understand the desire correctly, you want the viewer to be able to select an option (name, age, ss, experience, etc...) and then have different sorted results display depending upon which attribute was selected and you want to do this without refreshing the page.

From a design point of view, you have two ways to go. You can include in the initial page (in a Javascript data structure) all the possible data for all the selections. Then, it's just a matter of some javascript code to fetch the right piece of data from the data structure, sort it and insert it into the DOM to display.

Or, if you don't pre-include all the data, you will have to make an ajax call to fetch the desired data, sort it and then insert it into the DOM. The PHP you show in your code right now looks like it's only including the player's name.

Which way to go really depends upon the scale of the data. If it's manageable (from a speed of generating the page and browser memory consumption point of view) to just include all the data in the original page, that is easier to code. But, you have to look at your worst case of max number of players, max number of attributes you support. If that's not manageable, then you will need to support an ajax call that can return JSON data for a given attribute that has been selected.