javascript - 发送每行表单的下拉值

Question

我有一个表单外的下拉值和一个包含许多行的表来提交数据。我想做的是在每一行的提交期间还提交从下拉列表中获取的值。我的 table 看起来像我的下拉列表代码是

<div class="panel-heading">
   <label for="cat">Select a Category</label>
      <select class="form-control" id='category' name="category" data-live-search="true" style="max-width:40%;" >
         <?=$html?>
      </select>
  </div>

表格行的部分是

<form id="sync-cat" action="controllers/product-add.php" target="_blank">
     <input type="hidden" name="product" value="<?=$product['id']?>">
     <button type="submit" class="btn btn-info btn-md">Sync Products</button>
</form>

我试过使用 javascript 复制隐藏输入中的选定值，但只在第一行运行。我还尝试在下拉列表上方隐藏输入以复制选择选项，但是当我使用提交按钮“同步产品”时我没有找到获取值(value)的方法

Answer 1

它们应该在 HTML 中共享相同的表单，以便在发布表单时所有可用信息都显示在表单中。无论如何，您的下拉菜单也应该采用自己的形式(如果您不将它们放在相同的形式中)才有效。

如果您想继续忽略上面要考虑的正确事项，您可以使用类似的方法来完成。这个解决方案会让事情变得有点复杂。我建议采纳上述建议。

var form = document.getElementById('sync-cat')

form.addEventListener('submit', function(e) {
  var valueFromDropDown = document.getElementById('category').value;

  // Post the rest of the form
});

按照此 guide 的其余部分进行操作完成 JavaScript 帖子