html 基于文本框拉伸引导中下拉菜单的宽度

utugiqy6 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(148)

我有2个文本框的组合宽度必须始终为450px
第一个有下拉菜单，第二个没有
两个文本框构成输入组
下拉菜单可以随时在这两个选项之间切换
我希望第一个下拉框宽度与第一个文本框宽度相同

因此，即使450px在未来更改为700px，下拉菜单的宽度也必须相应调整。

<!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>

Html

来源：https://stackoverflow.com/questions/74811828/stretch-the-width-of-dropdown-in-a-bootstrap-based-on-textbox

1条答案

按热度按时间

fkvaft9z1#

下面的代码片段使用JS根据data-bs-toggle兄弟元素设置下拉菜单的宽度。
我添加了第二组宽度更大的唐斯，用于概念验证。
代码已注解。

// Get all dropdown menus on the page
let dropdown_menu = document.querySelectorAll('.dropdown-menu');

// foreach one
dropdown_menu.forEach(dd => {
  // get the parent wrapping element
  let parent = dd.parentElement;

  // If that parent has the input-group class, we're in the right spot.
  if (parent.classList.contains('input-group')) {
    // Get the element with the data-bs-toggle attribute's width
    let input_parent = parent.querySelector('[data-bs-toggle]').offsetWidth;
    // set the width on the dropdown
    dd.style.width = input_parent + 'px';
  }

});

<!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>
  
  
  <div class="dropdown selection-1d  input-group" style="width:700px">

<input type="text" class=" form-control" data-bs-toggle="dropdown" value="Value" aria-expanded="false" data-bs-auto-close="outside" readonly>

<input type="text" class=" form-control" value="Here is a long one" 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>

编辑

使用jQuery
一个二个一个一个

赞(0）回复(0）举报 2022-12-16

我来回答

html 基于文本框拉伸引导中下拉菜单的宽度

1条答案

编辑

相关问题

热门标签

最新问答