使用 Select2 下拉列表后 Bootstrap 5 无法工作

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

Select2 功能运行正常。但是，Bootstrap 有一个问题，使用 Select2 后，Bootstrap 不再工作。我使用的是 Bootstrap 5.3。图片显示第一次选择使用“Select2”和 Bootstrap，第二次选择仅使用 Boostrap

<!-- Bootstrap 5.3 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<!-- Bootstrap 5.3 -->

  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  
  <!-- Include Select2 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/select2.min.css" rel="stylesheet" />
  
  <!-- Include Select2 JS after jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/select2.min.js"></script>

<select id="selUser" class="form-select" name="Country" aria-label="Default select example">
<option selected>Country</option>
 <?php foreach ($data as $item): ?>
  <option value="<?= $item['country_name'] ?>"><?= $item['country_name'] ?>  </option>
 <?php endforeach; ?>
</select>

<script>
$(document).ready(function() {
  $('#selUser').select2();
});
</script>

下拉菜单工作正常。只是 css boostrap

css-selectors dropdown bootstrap-5 jquery-select2 option-type
2个回答
0
投票
<?php
// Update $data with your data recovery approach
$data = [
    ['country_name' => 'United States'],
    ['country_name' => 'Canada'],
    ['country_name' => 'United Kingdom'],
    // Add more countries here...
];
?>

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

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select2 Example</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/select2.min.css" rel="stylesheet" />
  </head>

  <body>

    <div class="container mt-5">
      <label for="selUser" class="form-label">Select a Country:</label>
      <select id="selUser" class="form-select" name="Country" aria-label="Select a country">
        <option selected disabled>Select a country</option>
        <?php foreach ($data as $item): ?>
        <option value="<?= $item['country_name'] ?>">
          <?= $item['country_name'] ?>
        </option>
        <?php endforeach; ?>
      </select>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/select2.min.js"></script>
    <script>
      $(document).ready(function() {
        $('#selUser').select2();
      });
    </script>

  </body>

  </html>

请按照上面评论中的建议尝试上述方法

完整的独立代码 这是一个独立的代码。复制粘贴到独立的 

.htm
文件中，并将其放入 
localhost
php
文件夹中，然后尝试执行它。

<?php
// Update $data with your data recovery approach
$data = [
    ['country_name' => 'United States'],
    ['country_name' => 'Canada'],
    ['country_name' => 'United Kingdom'],
    // Add more countries here...
];
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select2 Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/select2.min.css" rel="stylesheet" />
</head>
<body>

<div class="container mt-5">
    <label for="selUser" class="form-label">Select a Country:</label>
    <select id="selUser" class="form-select" name="Country" aria-label="Select a country">
        <option selected disabled>Select a country</option>
        <?php foreach ($data as $item): ?>
        <option value="<?= $item['country_name'] ?>">
            <?= $item['country_name'] ?>
        </option>
        <?php endforeach; ?>
    </select>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    $('#selUser').select2();
});
</script>

</body>
</html>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/select2.min.js"></script>
    
    <select id="selUser" class="form-select" name="Country" aria-label="Default select example">
      <option selected>Country</option>
      <?php foreach ($data as $item): ?>
      <option value="<?= $item['country_name'] ?>">
        <?= $item['country_name'] ?>
      </option>
      <?php endforeach; ?>
    </select>


    <script>
    $(document).ready(function() {
      $('#selUser').select2();
    });
    </script>
0
投票

您只需在 select2 初始值设定项中添加 theme: theme: 'bootstrap-5' ，例如在我的中就是这样，它可以工作，如果我删除它，我会遇到与您相同的蹩脚风格：

          $('.select2manufacturersModels').select2({
          theme: 'bootstrap-5',
          placeholder: "Selecciona el modelo",
          minimumInputLength: 1,
          allowClear: false,
          ajax: {....
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.