Bootstrap Popover with HTML

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
  <h3>Choose your option</h3>
  <input type="text" class="form-control" id="input" data-placement="auto" data-toggle="popover">
</div>

<div id="popover-content" class="hide">
  <div class="input-group">
    <select class="form-control" id="select">
      <option>one</option>
      <option>two</option>
      option>
    </select>
    <a href="#" id="optBtn" class="btn btn-primary input-group-addon">OK</a>
  </div>
</div>

JavaScript

$("[data-toggle=popover]").popover({
  html: true,
  content: function() {
    return $('#popover-content').html();
  }
});
$(document).on('click','#optBtn',function() {//can be hide after select
    var selectVar = $('#select').find('option:selected').val();
    $('#input').val(selectVar);
    $('.popover').hide();
})