Question

我有一个表格，每个项目都包含不同的项目和ID。每个项目都有一个下拉菜单，用于删除/编辑/启动它。我的问题是，只有第一个item-id被传递给我的每个$ post ['item_id']。

$(document).ready(function() {

$('.dropdown-opt li').click(function() {
        document.getElementById('opt').value = $(this).data('value');
        $('#options').submit();
});


$("#options").submit(function() {
    if (confirm('proceed?')){
        return true;
    } else {
        return false;
    }
});
});

 <!-- BEGIN items -->
  <tr>
    <td align="center">
      <form name="" action="" method="post" id="options">
      <input type="hidden" name="item_id" value="{items.ID}">
      <input type="hidden" name="action" id="opt" value="">

      <li class="dropdown-opt"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Optionen<span class="caret"></span></a>
        <ul id="selector" class="dropdown-opt" role="menu">
          <li data-value="edit"><a href="#">Edit</a></li>
          <li data-value="start"><a href="#">Start</a></li>
          <li data-value="delete"><a href="#">Delete</a></li>
        </ul>
      </li>
      </form>
    </td>
  </tr>
  <!-- END items -->

此时我的第一个ID是116，如果我点击“编辑”，我会在每个项目上获得POST-ID 116。但为什么？我有

 <input type="hidden" name="item_id" value="{items.ID}">

每个项目都不能使用相同的ID。

编辑：将id ='item_id'添加到隐藏的输入并更新javascript后，它现在可以正常工作。

 <input type="hidden" name="item_id" id="item_id" value="{items.ID}">

 $('.dropdown-opt li').click(function() {
        document.getElementById('opt').value = $(this).data('value');
        document.getElementById('item_id').value = $(this).closest('tr').find('input[name=item_id]').val();
        $('#options').submit();
});

唯一不起作用的是这一行

 $(this).closest('tr').find('input#opt').val($(this).data('value'));

在这个Javascript函数中

 $('.dropdown-opt li').click(function() {
        document.getElementById('opt').value = $(this).closest('tr').find('input#opt').val($(this).data('value'));
        document.getElementById('item_id').value = $(this).closest('tr').find('input[name=item_id]').val();
        $('#options').submit();
});

但就我所见，这并没有带来任何问题。非常感谢TechBreak !!!

Answer 1

您需要先找到closest tr元素的li input，然后将id中的值设为opt为$('.dropdown-opt li').click(function() { $(this).closest('tr').find('input#opt').val($(this).data('value')); alert($(this).closest('tr').find('input[name=item_id]').val()); $('#options').submit(); });并获得所需的项目ID

$(document).ready(function() {
  $('.dropdown-opt li').click(function() {
    $(this).closest('tr').find('input#opt').val($(this).data('value'));
    alert($(this).closest('tr').find('input[name=item_id]').val());
    
  });
  $("#options").submit(function() {
    if (confirm('proceed?')) {
      return true;
    } else {
      return
      false;
    }
  });
});

检查此工作演示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>

  <!-- BEGIN items -->
  <tr>
    <td align="center">
      <form name="" action="" method="post" id="options">
        <input type="hidden" name="item_id" value="115">
        <input type="text" name="action" id="opt" value="">

        <li class="dropdown-opt">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Optionen<span class="caret"></span></a>
          <ul id="selector" class="dropdown-opt" role="menu">
            <li data-value="edit"><a href="#">Edit</a>
            </li>
            <li data-value="start"><a href="#">Start</a>
            </li>
            <li data-value="delete"><a href="#">Delete</a>
            </li>
          </ul>
        </li>
      </form>
    </td>
  </tr>
    <tr>
    <td align="center">
      <form name="" action="" method="post" id="options">
        <input type="hidden" name="item_id" value="116">
        <input type="text" name="action" id="opt" value="">

        <li class="dropdown-opt">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Optionen<span class="caret"></span></a>
          <ul id="selector" class="dropdown-opt" role="menu">
            <li data-value="edit"><a href="#">Edit</a>
            </li>
            <li data-value="start"><a href="#">Start</a>
            </li>
            <li data-value="delete"><a href="#">Delete</a>
            </li>
          </ul>
        </li>
      </form>
    </td>
  </tr>
</table>
<!-- END items -->

如果表单使用javascript提交，则发布错误的值

1 个答案: