мой ajax submit onchange select работает только в первом ряду

Question

У меня есть HTML-таблица, в которой есть столбец с параметрами выбора, который отправляется с использованием события onchange с использованием ajax. код отлично работает для первой строки каждой страницы (так как для таблицы применяется разбиение на страницы), но любая другая строка бесполезна.

Я задал вопрос, связанный с этим вопросом ранее, и случайно наткнулся на этот вопрос, который, к счастью, мне очень помог, но не для всей таблицы. это оригинальная ссылка на вопросы и ответы: Отправить форму на выбор изменения через 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> 

Аякс код

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

примечание: предупреждение повторяет только первый ряд vlue.

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>