使我的组合框在 PHP 和 JQuery 中独立答案

【问题标题】：Making my combo boxes independent in PHP and JQuery使我的组合框在 PHP 和 JQuery 中独立
【发布时间】：2013-11-27 20:41:13
【问题描述】：

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

<script type="text/javascript">
    $(document).ready(function(){
        $(".country").change(function(){
            var id=$(this).val();
            var dataString = 'id='+ id;    
            $.ajax({
                type: "POST",
                url: "ajax-search.php",
                data: dataString,
                cache: false,
                success: function(html){
                    $(".player").html(html);
                    console.log(id);
                } 
            });        
        });
    });
</script>

   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>';
     }

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

【问题讨论】：

$(".player").html(html) 使用该类更新所有元素。您需要使用 DOM 遍历方法选择与他们更改的国家/地区框相邻的那个。

标签： javascript php jquery database combobox

【解决方案1】：

您应该只更新用户更改后的组合框，而不是与player 类匹配的所有元素。您可以使用context: 选项到$.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);
            } 
        });

    });
});

【讨论】：