如何让固定宽度DIV内的DropDown跳出滚动区域显示？

这个问题其实是因为你的父容器#a1设置了overflow-y:auto，而bootstrap-select默认会把下拉菜单渲染在触发元素的就近父级里，导致下拉内容被容器的滚动限制裁剪掉。解决方法很简单，利用bootstrap-select自带的配置项就能搞定：

核心修改点 #

只需要在初始化selectpicker时添加container: 'body'配置，把下拉菜单挂载到页面的<body>标签下，脱离原容器的限制：

$('.selectpicker').selectpicker({ 
  noneResultsText: 'موردی یافت نشد',
  container: 'body' // 关键配置，让下拉菜单跳出原DIV
});

原理说明 #

当设置container: 'body'后，下拉菜单的DOM元素会被移动到<body>层级下，不再受原DIV容器的overflow属性约束，自然就能完整显示。同时bootstrap-select会自动计算位置，保证下拉菜单和触发选择框精准对齐，不会出现偏移问题。

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet" />

<div id="a1">
  <table class="table">
    <thead>
      <tr>
        <th>hi</th>
        <th>bye</th>
        <th>hi</th>
        <th>bye</th>
        <th>hi</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <select class="selectpicker">
            <option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option>
          </select>
        </td>
        <td>
          <select class="selectpicker">
            <option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option>
          </select>
        </td>
        <td>
          <select class="selectpicker">
            <option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option>
          </select></td>
        <td>
          <select class="selectpicker">
            <option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option>
          </select>
        </td>
        <td>
          <select class="selectpicker">
            <option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option><option>1</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
<script>
$('.selectpicker').selectpicker({ 
  noneResultsText: 'موردی یافت نشد',
  container: 'body'
});
</script>

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