콤보 상자에서 값이 변경되면 가격 변경 PHP

Question

내 코드에 문제가 있습니다. 콤보 상자의 값이 변경 될 때 가격을 변경하고 싶지만 while 루프 핸들러에서는 첫 번째 테이블 행만 처리됩니다.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#size').change(function() { 
      //alert("aaa"); 
      var x = $('#size').attr('value'); 
      //alert(x); 
      $.ajax({ 
       type: "POST", 
       url: 'sizeChange.php', 
       data: 'size =' + size, 
       success: function (data) { 
        alert(data); 
       } 
      }) 
     }); 
    }); 
</script> 



<div id="price"> 
    <table border="1" width="200px"> 
    <tr> 
     <td> Size </td> 
     <td> Product</td> 
     <td>Price</td> 
    </tr> 
    <? 
     mysql_connect("localhost","root","") or die(mysql_error()); 
     mysql_select_db("test") or die(mysql_error()); 
     $query = mysql_query("select * from pricetest"); 
     if(!$query) 
     { die(mysql_error());} 
     else 
     { 
     while($row = mysql_fetch_array($query)) 
      { 
      echo "<tr> "; 
       ?> 
      <td> 
       <select name="size" id="size"> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        </select> 
      </td> 
      <td> <? $row['pd_name']; ?> </td> 
      <td> <? $row['price']; 

        } 
       }?> 
      </td> 
     </tr> 
     </table> 
</div> 

내가 잘못하고있는 것은 무엇입니까?

Answer 1

var x = $('#size').attr('value'); 대신 var x = $('#size').val();을 사용할 수도 있습니다. 또한 ajax에 data: 'size =' + x이라는 데이터를 보냅니다.

Answer 2

$(document).ready(function() { 
    $('#size').change(function() { 
     //alert("aaa"); 
     var x = $('#size').attr('value'); alert(x); 
     //alert(x); 
     $.ajax({ 
      type: "POST", 
      url: 'getsize.php', 
    data: 'size='+x, 
      success: function (data) { 
       alert(data); 
      } 
     }) 
    }); 
}); 

Answer 3

모든 요소의 ID가 동일하므로 (size)

$i = 1; 
while($row = mysql_fetch_array($query)) 
{ 
    echo "<tr id='row".$i."'> "; 
      ?> 
    <td> 
      <select name="size" class="size_dd" id="<?php echo $i ?>" > 
       <option value="1">1</option> 
       <option value="2">2</option> 
        <option value="3">3</option> 
       </select> 
    </td> 
    <td class="pd_name" > <? $row['pd_name']; ?> </td> 
    <td class="price" > <? $row['price']; ?> </td> 
    <?php $i++ ?> 
} 

을하고 이런 식으로 JS 변경 :

는 PHP 코드를 변경

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.size_dd').change(function() { 
      //alert("aaa"); 
      var size = this.value, 
           id = this.value; 
      //alert(x); 
      $.ajax({ 
       type: "POST", 
       url: 'sizeChange.php', 
       data: 'size =' + size, 
       success: function (data) { 
        $('tr#row td.pd_name').html(data['pd_name']); 
        $('tr#row td.price').html(data['price']); 
       } 
      }) 
     }); 
    }); 
</script>