从组合框PHP更改值时更改价格

Question

I have a problem with my code. I want to change the price when the value of the combo box changes, but in the while-loop handler, only the first table row is processed.

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

What might I being doing wrong?

Answer 1

You can use var x = $('#size').val(); instead of var x = $('#size').attr('value'); Also send data as data: 'size =' + x in ajax.

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

It's because all your elements have the same id ( size ).

Change your php code:

$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++ ?>
}

and change the JS to something like this:

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