如何从select2关闭按钮获取最近的ID？

debugcn 发表于 Dev

沥青公司

单击x我想要ID表行。

这是查看实际问题的代码段。https://jsfiddle.net/ja1omn9x/

我正在使用此代码：

但这给了我undefined应该怎么办？

$(document).on('click', '.select2-selection__choice__remove', function(e) {
  console.log("YES: ", $(this).closest('tr').attr('id'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr id="row1">
  <td data-select2-id="4">
    <select name="product_id[]" class="invoiceProducts">
      <option value="12" data-select2-id="19">Orange</option>
      <option value="14" data-select2-id="20">Apple</option>
    </select>
    <span class="select2>
      <span class=" selection ">
        <span class="select2-selection select2-selection--multiple ">
          <ul class="select2-selection__rendered ">
             <li class="select2-selection__choice " title="Apple " data-select2-id="23 ">
<span class="select2-selection__choice__remove " role="presentation ">×</span>Apple</li>
         </ul>
        </span>
       </span>
      <span class="dropdown-wrapper " aria-hidden="true ">
    </span>
  </span>
 </td>
</tr>

斯瓦蒂

您可以使用select2:unselecting它在您单击x按钮时被调用，然后您可以.closest("tr").prop("id")用来获取行的ID。

演示代码：

$(".js-example-basic-multiple-limit").select2({
  maximumSelectionLength: 2
});

$('.js-example-basic-multiple-limit').on('select2:unselecting', function(e) {
  console.log('I am in :)');
  console.log("YES: ", $(this).closest('tr').prop('id'));
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<table>
  <tr id="row1">
    <td>
      <select class="form-control js-example-basic-multiple-limit" multiple="multiple">
        <option selected="selected">orange</option>
        <option>white</option>
        <option selected="selected">purple</option>
      </select>
    </td>
  </tr>
  <tr id="row2">
    <td>
      <select class="form-control js-example-basic-multiple-limit" multiple="multiple">
        <option selected="selected">orange</option>
        <option>white</option>
        <option selected="selected">purple</option>
      </select>
    </td>
  </tr>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。