如果在Bootstrap Popover中，Dropdown不会选择

Question

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

我在popover中有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();
    }
  });
});

Answer 1

实际上，popover和bootstrap-select有问题。 我们可以把它命名为bug。一个解决方案就是：

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

您可以在JSFiddle中看到结果，并讨论了问题here。