Question

我有一个HTML表，该表具有一列带有选择选项的列，这些选择选项使用ajax通过onchange事件提交。该代码对于每页的第一行都非常有效（因为在表上应用了分页），但其他任何行都没有用。

我早些时候提交了一个与此问题有关的问题，偶然发现了这个问题，幸好对我有很大帮助，但对整个桌子却没有帮助。这是原始的问答链接： Submit form on select change via AJAX

我的自定义HTML代码

<td>
        <form action="" method="POST">
        <select class="changeStatus" name="changeStatus" style="margin-bottom:10px;">
            <option value="<?php echo $row["STATUS"]; ?>" > <?php echo $row["STATUS"]; ?></option>
            <option value="new">new</option>
            <option value="checking">checking</option>
            <option value="processing">processing</option>
            <option value="done">done</option>
          </select>
           <input class="order_Id" type="hidden" name="order_Id" value="<?php echo $row["ORDER_ID"];?>"/>
           </form>
          </td>

ajax代码

<script>
$(document).ready(function() {

    $('select.changeStatus').change(function(){
        $.ajax({
                type: 'post',
                url: 'test2.php',
                data: {selectFieldValue: $('select.changeStatus').val(), order_Id: $('input[name$="order_Id"]').val()},
                success: function(html){alert('Select field value has changed to' + $('select.changeStatus').val()); },
                dataType: 'html'
         });
    });
});
</script>

注意：警报也只在第一行显示回声。

php代码

<?php
$connection =   mysqli_connect('localhost' , 'root' ,'' ,'project_name');


    $changeStatus=$_POST['selectFieldValue'];
    $id=$_POST['order_Id'];

    $sql='UPDATE new_order SET STATUS="'.$changeStatus.'" WHERE ORDER_ID ="'.$id.'"';
     $result = mysqli_query($connection, $sql);


?>

我已经搜索了几天，这是到目前为止我唯一成功的代码。预先感谢

Answer 1

当处理多个对象的事件时，您需要注意仅处理触发事件的对象。

在您的情况下，类.changeStatus的每个选择上都有一个事件回调。当其中任何一项发生更改时，您将发布数据

selectFieldValue: $('select.changeStatus').val()

由于$('select.changeStatus')为您提供了一个与选择器匹配的所有对象的数组，并且.val()仅返回该数组中第一个对象的值，因此无论哪个行，您都有效地处理了第一行行已更改。相反，您需要使用

selectFieldValue: $(this).val()

this指的是触发事件的对象。

同样会提醒您；将$('select.changeStatus').val()更改为$(this).val()。

具有这些更改的最终脚本为：

<script>
$(document).ready(function() {

    $('select.changeStatus').change(function(){
        $.ajax({
                type: 'post',
                url: 'test2.php',
                data: {selectFieldValue: $(this).val(), order_Id:  $(this).siblings(".order_Id").val()},
//***only select that rows .order_Id by using $.siblings() with selector
                success: function(html){alert('Select field value has changed to' + $(this).val()); },
                dataType: 'html'
         });
    });
});
</script>

我的ajax提交onchange select仅在第一行上工作

1 个答案: