PHP组合框AJAX刷新

时间:2009-11-20 13:53:19

标签: php javascript ajax drop-down-menu

我有一个PHP页面,目前在页面的列中有4年的团队位置。客户想要选择位置上的球员并且有第一,第二和第三选择。目前,该页面显示了4列,每个位置都有一组组合。每个组合都有一整套玩家,用户从组合中选择他想要的玩家。在提交时,玩家位置存储在数据库中。 但是,客户现在想要更改页面,以便当他选择一年中的玩家和位置时,玩家将从组合中移除,并且不能再选择那一年。我使用了一些AJAX,但想知道是否有人有任何想法/建议。该页面目前很慢,所以他们也希望它加速。

页面布局目前是这样的

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

2 same as above

COMBOC1,2和3目前都拥有相同的玩家 - 当玩家被选中时,需要为其下方的所有组合删除它。我想通过更改页面设计和为玩家提供文本框来开始,并且每年都会选择一个单独的玩家:

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

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

2 ...

然后我每年只有一个组合框可以担心 - 但我有同样的问题,刷新组合框并删除已选择的播放器,我更喜欢用一个页面提交它

很抱歉长篇大论 - 干杯

1 个答案:

答案 0 :(得分:0)

如果我正确理解您的问题,您要做的是从后续选择框中删除选项,具体取决于前几年选择框中选择的内容。您不应该提交任何表单来执行此操作 - 您应该能够在javascript中完全执行此操作。此代码应该有助于您入门:


<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>

基本上,所有这一切都是使用JQuery来设置一个事件,当其中一个选择框发生变化时,从具有年份编号的任何后续选择框中删除具有相同值的选择(在“名称”中定义)每个选择框的属性)大于已更改的选择框的年份编号。

除此之外,您还需要跟踪从哪些选择框中删除了哪些选项,以便在未选择播放器时重新添加这些选项。

由于你也在谈论组合框,我假设除了选择框之外你还有一个文本输入字段,但你可以使用相同的原则。

如果你不熟悉JQuery,你可能想要了解它 - 它使这样的事情变得容易多了。这将是一个很好的起点:http://docs.jquery.com/How_jQuery_Works。希望这会有所帮助。