php - 在 foreach 循环中使用 jQuery 下拉更新 MySQL

Question

这个问题我已经有一段时间了，似乎无法全神贯注。我有一个从数据库中提取的下拉菜单，用于获取项目的状态。

$myQuery2 = "SELECT InventoryItemStatus.InventoryItemStatusID, InventoryItemStatus.InventoryItemStatusDescription FROM InventoryItemStatus";
$result2 = mysql_query($myQuery2) or die (mysql_error());
if(mysql_num_rows($result2)){ 
    $select2= '<select style="width:90px" name="StatusList">';
        while($rs=mysql_fetch_array($result2)){
                $select2.='<option value="'.$rs['InventoryItemStatusID'].'">'.$rs['InventoryItemStatusDescription'].'</option>';                        
            }
}
$select2.='</select>';

简单。现在我的目标是在不重新加载页面的情况下使用 jQuery/AJAX 更新数据库。我想出了如何使用以下代码来做到这一点。

$(document).ready(function(){
  $('[name="StatusList"]').each(function() {
    $(this).change(function() {
    var mydata = $('[name="StatusList"]').val();//$(this).val();
    var inputdata = $('[name="StarmontInventoryItemID"]').val();
    $.ajax({   
       type: 'POST',   
       url: 'update_status/update_starmont.php',   
       data: {StatusList:mydata ,StarmontInventoryItemID:inputdata}
    });
    });
  });
});

没问题。此代码监听下拉菜单的变化，当激活时调用脚本并相应地更新数据库。我遇到的让我发疯的问题是我需要为我拥有的每个库存项目显示此下拉列表。例如，我在代码的开头进行查询，提取 10 个库存项目。然后我做的是在 php 中使用 foreach 来允许我分别拉取每个项目。我想要做的是让这 10 个项目中的每一个都出现这个下拉列表，并且在更改时它将更新数据库以获取适当的库存项目。现在发生的事情是出现在列表顶部的下拉菜单有效，它也会根据我的需要进行更新。但是对于接下来的 9 个，它就是不起作用，我不明白为什么。

这是我的 foreach 循环。

<?php
if (sizeof($rows14) > 0) {
foreach($rows14 as $row14):


$myQuery2 = "SELECT InventoryItemStatus.InventoryItemStatusID, InventoryItemStatus.InventoryItemStatusDescription FROM InventoryItemStatus";
$result2 = mysql_query($myQuery2) or die (mysql_error());
if(mysql_num_rows($result2)){ 
    $select2= '<select style="width:90px" name="StatusList">';
        while($rs=mysql_fetch_array($result2)){
                $select2.='<option value="'.$rs['InventoryItemStatusID'].'">'.$rs['InventoryItemStatusDescription'].'</option>';                        
            }
}
$select2.='</select>';

echo"
<tr class='tableRowClass2'>
<td height='20'>{$row14['OnHand']}</td>
<td height='20'>{$row14['ItemName']} - {$row17['StarmontSystemID']} - {$row17['StarmontSerial']}</td>
<td height='20'>
    <form method='post'>
    {$select2}
    <input type='hidden' value='{$row14['InventoryItemID']}' name='StarmontInventoryItemID'/>
    </form>
</td>
</tr>";
endforeach;
}
?>

如您所见，当下拉列表发生变化时，我想用适当的状态更新 InventoryItemID。我不明白的是为什么第一个有效，但后面的其他无效？会不会像我必须设置一个标志？

我尝试了多种不同的方法，例如将下拉列表的查询移动到 foreach 循环内、循环外，这是一种组合，但我似乎无法让它工作!如有任何帮助或建议，我们将不胜感激。

谢谢你的时间!

Answer 1

您的问题是选择元素的名称不是唯一的。照原样，jQuery 只将您的更改事件绑定(bind)到第一个选择元素。你需要使用 each()

$('[name="StatusList"]').each(function() {
    $(this).change(function() {
        //YOUR CODE
    });
});

您将遇到与 StarmontInventoryItemID 相同的问题，并且必须使用像 next()/prev()/parent() 这样的函数/child() 获取它的值。

此外，我建议使用 Firebug 或其他浏览器内调试工具，它对调试 javascript 尤其是 ajax 调用有很大帮助。