如果在 Bootstrap 弹出框内，下拉菜单不选择答案

【问题标题】：Dropdown does not select if within Bootstrap Popover如果在 Bootstrap 弹出框内，下拉菜单不选择
【发布时间】：2016-08-13 10:28:22
【问题描述】：

使用 jQuery v1.12.4、Bootstrap v3.3.7 和Bootstrap-Select v1.10.0。

我在弹出框中有 2 个组件。当弹出框打开时，我可以单击下拉菜单，但单击选项后，选择不会改变。

请看这个jsfiddle。

CSS

.flex { display: flex; }

HTML

<div>
  <a role="button" class="btn btn-default" data-poc="#beds" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Bedrooms <span class="caret"></span></a>
  <div id="beds" class="hide">
    <div class="flex">
      <select name="minBeds" id="minBeds" class="selectpicker">
        <option>Min Beds</option>
        <option value="1">1 Bed</option>
        <option value="2">2 Bed</option>
        <option value="3">3 Bed</option>
        <option value="4">4 Bed</option>
        <option value="5">5 Bed</option>
      </select>
      <select name="maxBeds" id="maxBeds" class="selectpicker">
        <option>Max Beds</option>
        <option value="1">1 Bed</option>
        <option value="2">2 Bed</option>
        <option value="3">3 Bed</option>
        <option value="4">4 Bed</option>
        <option value="5">5 Bed</option>
      </select>
    </div>
  </div>
</div>

JS

$(document).ready(function() {
  $('.po').popover({
    animation: false,
    placement: 'bottom',
    html: true,
    content: function() {
      var poc = $(this).attr('data-poc');
      return $(poc).html();
    }
  });
});

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

实际上popover 和bootstrap-select 的工作存在一些问题。我们可以将其命名为错误。一种解决方案是：

$('.po').popover({
    content: $('#beds').html(),
    placement: 'bottom',
    html: true
}).on('shown.bs.popover', function() {
    $('.selectpicker2').selectpicker();
});

你可以在JSFiddle看到结果，问题在here讨论。

【讨论】：