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

문제는 select 요소의 이름이 고유하지 않다는 것입니다. 즉, jQuery는 변경 이벤트를 첫 번째 select 요소에만 바인딩합니다. 당신은 당신이 StarmontInventoryItemID과 같은 문제가되며, 그 값을 얻을 수 next()/prev()/parent()/child() 같은 기능을 사용해야합니다 each()

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

를 사용해야합니다.

더 나아가 파이어 버그 또는 다른 브라우저의 디버그 도구를 사용하는 것이 좋습니다. 자바 스크립트 및 특히 아약스 호출을 디버깅하는 데 큰 도움이됩니다.