代码之家 › 专栏 › 技术社区 › SteveB

PHP组合框Ajax刷新

drop-down-menu ajax javascript php

SteveB · 技术社区 · 15 年前

我有一个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目前都有相同的播放器-当选择播放器时,需要删除其下的所有Combo。我想从改变页面设计开始,每年都有供玩家和单个玩家选择的文本框,如下所示:

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

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

2 ...

然后我每年只有一个组合框要担心-但是我有同样的问题刷新组合框和删除已选定的播放器,我宁愿通过一个页面提交来完成。

很抱歉这么久了-干杯

1 回复 | 直到 12 年前

Steven Oxley 15 年前

如果我正确理解您的问题,您要做的是根据在前几年的选择框中选择的内容从随后的选择框中删除选项。您不必提交任何表单来完成这项工作——您应该能够完全用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 .希望这有帮助。