Utilizing jQuery v1.12.4, Bootstrap v3.3.7 and Bootstrap-Select v1.10.0.
In a popover, I have 2 components. When the popover is opened, I am able to interact with the dropdowns but the selection does not change when clicking an option.
You can view the example on 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();
}
});
});