0

コードに問題があります。コンボ ボックスの値が変化したときに価格を変更したいのですが、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>

私は何を間違っているのでしょうか？

4

3 に答える 3

0 
$(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);
            }
        })
    });
});
于 2012-11-08T05:53:53.490 に答える
0

また、ajaxのように データを送信するvar x = $('#size').val();代わりに使用できます。var x = $('#size').attr('value');data: 'size =' + x

于 2012-11-08T05:40:27.763 に答える
0

これは、すべての要素が同じ 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>
于 2012-11-08T06:55:22.173 に答える