Question

I have a PHP page that currently has 4 years of team positions in columns on the page. The client wants to select the players in positions and have first, second and thrid choices. Currently the page shows 4 columns with sets of combos for each position. Each combo has a full set of players in it and the user chooses the player he wants from the combos. On submit the player positions are stored in the database. However, the client now wants to change the page so that when he selects a player in a year and position then the player is removed from the combo and can no longer be selected for that year. I ve used a bit of AJAX but was wondering if anyone had any thoughts/suggestions. The page is currently quite slow so they want it speeded up as well.

The page layout is currently like this

POISTION             YEAR1           YEAR2        YEAR3          YEAR4
1                    COMBOC1         COMBOC1      COMBOC1        COMBOC1
                     COMBOC2         COMBOC2      COMBOC2        COMBOC2
                     COMBOC3         COMBOC3      COMBOC3        COMBOC3

2 same as above

COMBOC1, 2 and 3 all currently have the same players - when a player is selected it needs to be removed for all combos below it. I was thinking of starting by changing the page design and having text boxes for the players and a single player select under each year like this:

POISTION             YEAR1                         YEAR2          YEAR3           YEAR4
1                    <PLAYER><POSITION><CHOICE>    ...

                     [TEXT BOX CHOICE1]
                     [TEXT BOX CHOICE2]
                     [TEXT BOX CHOICE3]

2 ...

Then I only have 1 combo box for each year to worry about - I do however have the same problem of refreshing the combo box and removing the player that has been selected, and I d prefer to do it withough a page submit.

Sorry for the long posting - cheers

Answer 1

If I am understanding your question correctly, what you want to do is remove options from subsequent select boxes depending on what is selected in the previous years select boxes. You should not have to submit any forms to do this - you should be able to do it purely in javascript. This code should help get you started:


<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".year").change(function () {
            var name = $(this).attr("name");
            var checkYearNum = name.substr(4);
            var value = $(this).val();
            var removeFromLaterYears = function (index) {
                var yearNum = $(this).attr("name").substr(4);
                if (yearNum > checkYearNum) {
                    var selector = "[value= " + value[0] + " ]";
                    $(this).children(selector).remove();
                }
            }
            $(".year").each(removeFromLaterYears);
        });
    });
</script>
</head>
<body>
<form>
<fieldset>
<select class="year" name="year1">
    <option value="">Select...</option>
    <option value="player1">Player 1</option>
    <option value="player2">Player 2</option>
    <option value="player3">Player 3</option>
</select>

<select class="year" name="year2">
    <option value="">Select...</option>
    <option value="player1">Player 1</option>
    <option value="player2">Player 2</option>
    <option value="player3">Player 3</option>
</select>

<select class="year" name="year3">
    <option value="">Select...</option>
    <option value="player1">Player 1</option>
    <option value="player2">Player 2</option>
    <option value="player3">Player 3</option>
</select>
</fieldset>
</form>
</body>
</html>

Basically, all this is doing is using JQuery to set an event that, when one of the selection boxes changes, removes the selection with the same value from any following selection boxes that have a year number (defined in the "name" attribute of each select box) that is greater than the year number of the selection box that was changed.

In addition to this, you will need to keep track of which selections have been removed from which selection boxes so that they can be re-added if the player is unselected.

Since you were talking about combo boxes as well, I assume you have a text input field in addition to the select boxes, but you can use the same principle with those.

If you re not familiar with JQuery you might want to get to know it - it makes stuff like this a lot easier. This would be a good place to start: http://docs.jquery.com/How_jQuery_Works. Hope this helps.

友情链接