Javascript 多个选项框同名jquery ajax

我有多个同名的选择框。现在，当我从第一个选择框中选择值时，它将提交该值并更新数据库。当我在另一个选择框中选择和项时，它将提交第一个选择框中的值。我觉得javascript是不对的。你知道怎么了吗

这是我的html：

<?php foreach ($result as $row): ?>
<select class="form-control" name="category[]" required>
    <option value="" disabled selected>Select The Category </option>
    <option value="station">Station</option>
    <option value="equipment">Tools/Equipment</option>
    <option value="supplies">Supplies</option>
</select>
<input id="taskID" value="<?php echo $row['id']; ?>" hidden></input>
<?php endforeach; ?>

addressBook.php

if (isset($_POST['task'])) {

  $task = $_POST['task'];
  $id = $_POST['name'];

  $stmt = $con->prepare("UPDATE members SET task = ? WHERE id = ?");
  $stmt->bind_param('ss', $task, $id);
  $stmt->execute();

}

---

将class属性更改为：

class=“表单控件类别选择”

---

事件

参数包含触发该事件的元素。好好利用它<代码>未捕获类型错误：selectInstance.val不是函数抱歉。如果您尝试以下操作，您会得到什么：例如（selectInstance of$（'select[name=“category[]”]）.val（）{var formData={'task'：selectInstance，'name'：$（'input[name=“taskID[]”]）.val（）}；它似乎是通过单个值字母循环的。我自己不是很好，但我知道，如果给每个

select

元素一个不同的id或至少另一个类名，处理起来会容易得多。为什么要改为使用name属性呢？现在必须这样做。你不需要id，但是t添加类选择器“categorySelect”

if (isset($_POST['task'])) {

  $task = $_POST['task'];
  $id = $_POST['name'];

  $stmt = $con->prepare("UPDATE members SET task = ? WHERE id = ?");
  $stmt->bind_param('ss', $task, $id);
  $stmt->execute();

}

$('.categorySelect').change(function(event){
      for(selectInstance of $('.categorySelect')){
          var formData = {
          'task': $(selectInstance).val(),
          'name': $(selectInstance).next().val()
          };


          $.ajax({
              type: 'POST',
              url: 'php/addressBook.php',
              data: formData,
              dataType: 'html',
              encode: true
          })
          .done(function(msg) {
              $(".alert").html(msg);
          })  
          .fail(function(data) {
              console.log(data);
          })
          event.preventDefault();
      }

});