Как получить ближайший идентификатор от кнопки закрытия select2?

Нажав на x Я хочу ID в строке таблицы.

Это фрагмент кода, чтобы увидеть реальную проблему. https://jsfiddle.net/ja1omn9x/

Я использую этот код:

Но это дает мне undefined Каким должен быть путь?

$(document).on('click', '.select2-selection__choice__remove', function(e) {
  console.info("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>

Пожалуйста, нажмите «Изменить», затем [<>] и предоставьте минимальный воспроизводимый пример с отрендеренным HTML, скриптом и фреймворками из CDN.

— 21.12.2020 10:10

добавил код.

— 21.12.2020 10:17

Еще раз отредактировал. :-)

— 21.12.2020 10:19

Смотрите мой обновленный ответ

— 21.12.2020 10:44

Я также добавил jsfiddle, чтобы увидеть проблему.

— 21.12.2020 10:46

Ваш JSFiddle не запускается, потому что вы загружаете jQuery слишком поздно, и на самом деле у вас не было .js-example-basic-multiple-limit в вашем примере. смотри это

— 21.12.2020 10:48

В чем проблема? Код работает. УЖАСНО, но работает здесь: jsfiddle.net/mplungjan/6ucr87d3

— 21.12.2020 10:51

jsfiddle.net/ilazycoder/uc2wh6Ls/3 Проверьте здесь в консоли, чтобы увидеть проблему.

— 21.12.2020 10:54

Кажется, что код select2 на самом деле не находится в DOM. Я не могу найти способ использовать jQUery, чтобы делать то, что вы хотите. Вам нужно посмотреть, может ли документация select2 помочь

— 21.12.2020 11:39

javascript jquery

21.12.2020 09:48

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Раскрытие чувствительных данных

Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Зод: сила проверки и преобразования данных

Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Руководство ChatGPT по продаже мини JS-файлов

JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...

288

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать select2:unselecting, это будет вызываться всякий раз, когда вы нажимаете кнопку x, тогда вы можете использовать .closest("tr").prop("id"), чтобы получить идентификатор строки.

Демонстрационный код:

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

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

<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>

<script src = "https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/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>

21.12.2020 13:19

Другие вопросы по теме

Как отправить форму, когда любое значение, выбранное из заполненного текстового поля, с помощью javascript или jQuery, не нажимая кнопку отправки

JSTree загружает ленивую загрузку, не работающую для моего URL-адреса ресурса, но для образца URL-адреса

Uncaught RangeError: превышен максимальный размер стека вызовов в вызове jquery ajax

Проверка электронной почты и пароля не работает в коде javascript

Как показать всплывающее окно после завершения кроссворда - JS

Как я могу сгруппировать свои данные по статусу в JS/Jquery

JQuery → Новая функция щелчка идентификатора диапазона не отвечает

Как изменить атрибуты имени для автоматически добавленных входов и текстовых полей?

Разделите UL на два столбца, но не разбивайте вложенные UL.

Jquery активен только один div при наведении мыши/наведении мыши

Как получить ближайший идентификатор от кнопки закрытия select2?

Ответы 1

Другие вопросы по теме

Похожие вопросы