當從組合框更改值時更改價格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').val();而不是var x = $('#size').attr('value'); 也可以在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）。

更改你的PHP代碼：

$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的東西是這樣的：

<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>