Select2 + bootstrap 模态问题

问题描述 投票：0回答：1

引导程序版本：5.1.3

选择2版本：4.1.0

复制链接：https://jsfiddle.net/L60xwgmt/1/

            $('.select2').select2({
                dropdownParent: $('#dataModal'),
                width: '100%'  // Ensure the dropdown uses the full width of the parent
            });

当您在引导模式上打开 select2 时，它有时会自动单击选项，或者选择框选项会在另一个错误的选择框中打开。这种情况在 iOS 上经常发生，就像在 Mac 上一样。但即使在 Windows 上（如果您尝试选择最后 2 个选择框，它也会变得很奇怪）

我尝试了很多事情，例如更改 css、z-index 以及晚上添加以下内容：

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

我能做些什么来解决这个问题吗？

enter image description here

modal-dialog jquery-select2
1个回答
0
投票

一种解决方案是将包含 

<td>
标签的 
<select>
标签作为 dropdownParent 放置在 select2 的选项中。

查看相关代码

let $td = $('<td></td>');
$td.append($select);

$dataRow.append($td);

// Append the row to the table body
$tableBody.append($dataRow);
$select.select2({
    dropdownParent: $td,
    width: '100%' // Ensure the dropdown uses the full width of the parent
});

在代码片段中查看它的工作情况 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Select2 in Modal Example</title>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Select2 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />

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

  <style>
    .modal-dialog {
      max-width: 80%;
      /* Adjust the modal width */
    }
  </style>
</head>

<body>

  <div class="container mt-5">
    <button id="openModalBtn" class="btn btn-primary">Open Modal</button>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="dataModal" tabindex="-1" aria-labelledby="dataModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="dataModalLabel">Data with Select2</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <table class="table table-striped" id="dataTable">
            <thead>
              <tr>
                <th>Delivery Associate</th>
                <th>Service Type</th>
                <th>Date</th>
                <th>Route</th>
                <th>Reconciliation</th>
              </tr>
            </thead>
            <tbody>
              <!-- Data rows will be inserted here via JS -->
            </tbody>
          </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Sample data to display in the table
    const data = [{
        deliveryAssociate: 'John Doe',
        serviceType: 'Parcel',
        date: '2024-09-28',
        route: 'A123'
      },
      {
        deliveryAssociate: 'Jane Smith',
        serviceType: 'Parcel',
        date: '2024-09-29',
        route: 'B456'
      },
      {
        deliveryAssociate: 'Richard Roe',
        serviceType: 'Parcel',
        date: '2024-09-30',
        route: 'C789'
      },
      {
        deliveryAssociate: 'Richard Roe 2',
        serviceType: 'Parcel',
        date: '2024-09-30',
        route: 'C789'
      },
      {
        deliveryAssociate: 'Richard Roe 3',
        serviceType: 'Parcel',
        date: '2024-09-31',
        route: 'C789'
      },
      {
        deliveryAssociate: 'Richard Roe 4',
        serviceType: 'Parcel',
        date: '2024-09-27',
        route: 'C790'
      },
      {
        deliveryAssociate: 'Richard Roe 5',
        serviceType: 'Parcel',
        date: '2024-09-26',
        route: 'C791'
      },
      {
        deliveryAssociate: 'Richard Roe 6',
        serviceType: 'Parcel',
        date: '2024-09-25',
        route: 'C792'
      }
    ];

    const contractors = [{
        fullName: 'John Doe',
        reference: 'JD123'
      },
      {
        fullName: 'Jane Smith',
        reference: 'JS456'
      },
      {
        fullName: 'Richard Roe',
        reference: 'RR789'
      },
      {
        fullName: 'Another Contractor',
        reference: 'AC101'
      },
      {
        fullName: 'Another Contractor 2',
        reference: 'AC102'
      },
      {
        fullName: 'Another Contractor 3',
        reference: 'AC103'
      },
      {
        fullName: 'Another Contractor 4',
        reference: 'AC104'
      }
    ];

    // Initialize the modal and table when the button is clicked
    $('#openModalBtn').on('click', function() {
      const $tableBody = $('#dataTable tbody');
      $tableBody.empty(); // Clear the table body

      data.forEach(row => {
        const $dataRow = $('<tr></tr>');

        // Populate the table cells
        $dataRow.append(`<td>${row.deliveryAssociate}</td>`);
        $dataRow.append(`<td>${row.serviceType}</td>`);
        $dataRow.append(`<td>${row.date}</td>`);
        $dataRow.append(`<td>${row.route}</td>`);

        // Create the Select2 dropdown for reconciliation
        const $select = $('<select class="form-control select2"></select>');
        $select.append('<option value="">--- Select Contractor ---</option>');

        contractors.forEach(contractor => {
          $select.append(`<option value="${contractor.reference}">${contractor.fullName} (${contractor.reference})</option>`);
        });

        let $td = $('<td></td>');
        $td.append($select);

        $dataRow.append($td);

        // Append the row to the table body
        $tableBody.append($dataRow);
        $select.select2({
          dropdownParent: $td,
          width: '100%' // Ensure the dropdown uses the full width of the parent
        });
      });

      // Initialize Select2 on all the select boxes
      /*             $('select.select2').select2({
                      dropdownParent: $('#dataModal'),
                      width: '100%'  // Ensure the dropdown uses the full width of the parent
                  }); */

      // Show the modal
      $('#dataModal').modal('show');
    });
  </script>

</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.