Javascript 使组合框在PHP和JQuery中独立

我在使用数据库内容填充组合框时遇到了一些问题，这取决于用户在另一个组合框中选择的内容。 当我使用一对盒子时，它工作得很好国家->玩家。但是当我在同一页面上添加几个国家->玩家时，我的所有玩家都会被第一个国家框选中。 这是我的代码的一个快照，它是由以下内容创建的：

$（文档）.ready（函数（）{
$（“.country”）.change（函数（）{
var id=$（this.val（）；
var dataString='id='+id；
$.ajax({
类型：“POST”，
url:“ajax search.php”，
数据：dataString，
cache:false，
成功：函数（html）{
$（“.player”）.html（html）；
console.log（id）；
} 
});        
});
});

---

while（$row=mysql\u fetch\u array（$result））{
$counter++；
回声'；
呼应“国家”；
while（$row=mysql\u fetch\u数组（$result2））{
$data=$row['team_name']；
回显“.$data.”；
}
回声'；
回声“玩家”；
}

问题是，当我在第一个组合框中选择德国队时，我会为德国队的球员获得所有其他组合框。这取决于我在javascript中检查class=“player”，但我不知道如何创建此连接

---

您应该只更新用户更改的组合框之后的组合框，而不是更新与

player

类匹配的所有元素。您可以使用

上下文：

选项

$.ajax

将更改的元素传递给回调

$(document).ready(function() {
    $(".country").change(function() {
        var id=$(this).val();

        $.ajax ({
            type: "POST",
            url: "ajax-search.php",
            data: {id: id},
            cache: false,
            context: this;
            success: function(html) {
                $(this).next(".player").html(html);
                console.log(id);
            } 
        });

    });
});

$（“.player”）.html（html）

使用该类更新所有元素。您需要使用DOM遍历方法来选择与他们更改的国家/地区框相邻的国家/地区框。

   while ($row = mysql_fetch_array($result)) {
      $counter++;
         echo '<select class = "country" name="singleBetTeam[' . $counter . ']">';
         echo "<option selected = 'selected'> COUNRTY</option>";
            while ($row = mysql_fetch_array($result2)) {
               $data = $row['team_name'];
               echo '<option value="'.$data.'">'.$data.'</option>';
             }
             echo '</select><select name="singleBetStar[' . $counter . ']" class="player">';
          echo '<option selected="selected"> PLAYER </option></select>';
     }

$(document).ready(function() {
    $(".country").change(function() {
        var id=$(this).val();

        $.ajax ({
            type: "POST",
            url: "ajax-search.php",
            data: {id: id},
            cache: false,
            context: this;
            success: function(html) {
                $(this).next(".player").html(html);
                console.log(id);
            } 
        });

    });
});