Bootstrap环境下下拉菜单宽度自适应对应textbox的技术问询

我有两个文本框，总宽度固定为450px（以后可能改成700px），俩框组成一个input-group。第一个框初始带下拉菜单，第二个没有；需要实现下拉菜单能在两个框之间切换显示，且下拉菜单宽度必须和当前绑定的文本框一致，总宽度修改后也能自动适配。

场景截图：

原代码：

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

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  
  
  <div class="dropdown selection-1d  input-group" style="width:450px">
  
      <input type="text" class=" form-control" data-bs-toggle="dropdown" value="All Fruits" aria-expanded="false" data-bs-auto-close="outside" readonly>
      
      <input type="text" class=" form-control" value="All Fruits" aria-expanded="false">
      
    <div class="dropdown-menu p-0">
      <div class="list-group">
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Fruit1 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Fruit2 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Fruit3 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Fruit4 </label>
      </div>
    </div>
  </div>

  

</body>
</html>

要实现下拉菜单自适应文本框宽度、支持切换绑定目标的效果，需要调整布局结构并添加切换逻辑，具体修改如下：

1. 布局调整 #

• 给每个文本框单独包裹dropdown容器，让下拉菜单能直接继承容器宽度
• 使用Bootstrap的flex-grow-1类让两个文本框平分总宽度（如需不等宽，调整flex比例即可）
• 给下拉菜单添加w-100类，强制其与父容器（文本框容器）宽度一致

2. 切换逻辑 #

通过JS控制Bootstrap的Dropdown实例，切换时销毁旧实例、给新文本框绑定实例，并同步下拉菜单的位置和宽度。

修改后的完整代码：

<!doctype html>
<html lang="zh-CN">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <style>
    .input-group {
      width: 450px; /* 总宽度，后续修改直接替换此值即可 */
    }
    /* 确保下拉菜单与文本框宽度完全对齐 */
    .dropdown-menu.w-100 {
      min-width: auto;
      width: 100% !important;
    }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

  <div class="input-group">
    <!-- 第一个文本框容器 -->
    <div class="dropdown flex-grow-1 me-1">
      <input type="text" class="form-control dropdown-toggle active-target" value="All Fruits" aria-expanded="false" readonly>
    </div>
    <!-- 第二个文本框容器 -->
    <div class="dropdown flex-grow-1">
      <input type="text" class="form-control" value="All Fruits" aria-expanded="false">
    </div>
    <!-- 共用下拉菜单 -->
    <div class="dropdown-menu p-0 w-100">
      <div class="list-group">
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Fruit1 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Fruit2 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Fruit3 </label>
        <label class="list-group-item">
          <input class="form-check-input me-1" type="checkbox" value=""> Fruit4 </label>
      </div>
    </div>
  </div>

  <!-- 切换下拉绑定目标的按钮 -->
  <button class="btn btn-secondary mt-3" id="switchDropdown">切换下拉菜单绑定的文本框</button>

  <script>
    // 初始化第一个文本框的下拉实例
    let dropdownInstance = new bootstrap.Dropdown(document.querySelector('.active-target'), {
      autoClose: 'outside'
    });

    // 切换按钮点击逻辑
    document.getElementById('switchDropdown').addEventListener('click', function() {
      // 销毁当前下拉实例
      dropdownInstance.dispose();
      
      // 切换激活的下拉目标
      const allInputs = document.querySelectorAll('.form-control');
      allInputs.forEach(input => input.classList.toggle('active-target'));
      
      // 给新目标创建下拉实例
      const newTarget = document.querySelector('.active-target');
      dropdownInstance = new bootstrap.Dropdown(newTarget, {
        autoClose: 'outside'
      });
      
      // 调整下拉菜单的位置和宽度，对齐新文本框
      const dropdownMenu = document.querySelector('.dropdown-menu');
      const targetRect = newTarget.getBoundingClientRect();
      dropdownMenu.style.left = `${targetRect.left}px`;
      dropdownMenu.style.width = `${targetRect.width}px`;
    });

    // 窗口大小变化时同步下拉菜单宽度
    window.addEventListener('resize', function() {
      const activeTarget = document.querySelector('.active-target');
      if (activeTarget && dropdownInstance) {
        const targetRect = activeTarget.getBoundingClientRect();
        const dropdownMenu = document.querySelector('.dropdown-menu');
        dropdownMenu.style.width = `${targetRect.width}px`;
      }
    });
  </script>
</body>
</html>

重点说明 #

• 自适应宽度：下拉菜单通过w-100类和自定义样式，完全继承文本框容器的宽度，后续修改总宽度时，文本框和下拉菜单会自动按比例缩放。
• 切换功能：通过销毁重建Dropdown实例实现下拉菜单的目标切换，每次切换都会重新对齐位置和宽度。
• 窗口适配：添加窗口resize监听，确保窗口缩放时下拉菜单宽度始终匹配文本框，避免错位。

内容的提问来源于stack exchange，提问作者Code Guy