title: How can I make a <select> in a popover display the selected option on console?
body: <p>I am trying to get the value of a selected option from a html select element. The select is inside a bootstrap popover. Could someone tell me how should I proceed? I keep getting no results at all.</p>
  
  <pre><code>&lt;div&gt;
      &lt;button type="button" id="popover" data-toggle="popover"&gt;Popover&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my Javascript:</p>
  
  <pre><code>     var content:    '&lt;form role="form"&gt;' +
                              '&lt;div class="form-group"&gt;' +
                                  '&lt;label&gt;Wildcard:&lt;/label&gt;'+
                                  '&lt;select name="options" id="wildcarddropdown"&gt;' +
                                      '&lt;option value="yes"&gt;Yes&lt;/option&gt;'+
                                      '&lt;option selected="selected" value="no" &gt;No&lt;/option&gt;'+
                                  '&lt;/select&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;div class="wildcard" style="display: none"&gt;' +
                                  '&lt;div class="form-group"&gt;' +
                                      '&lt;label for="inputlabel"&gt;Label:&lt;/label&gt;'+
                                      '&lt;input type="text" id="inputlabel"&gt;' +
                                  '&lt;/div&gt;' +
                                  '&lt;div class="form-group"&gt;' +
                                      '&lt;label for="datatype"&gt;Data Type:&lt;/label&gt;' +
                                      '&lt;select name="datatype" id="datatype"&gt;' +
                                          '&lt;option value="numeric"&gt;Numeric&lt;/option&gt;' +
                                          '&lt;option value="string"&gt;String&lt;/option&gt;' +
                                     '&lt;/select&gt;'+
                                  '&lt;/div&gt;' +
                              '&lt;/div&gt;' +
                               '&lt;/form&gt;';
  
      $('[data-toggle="popover"]').popover({html:true, container:'body', trigger:'click', placement:'bottom', content:wildcardcontent});
  
      var button = $(document).find('#popover');
  
      $(button).on('click', function(e){
  
          if($(e.target).data('toggle') !== 'popover' &amp;&amp; $(e.target).parents('.popover.in').length === 0) {
              $('[data-toggle="popover"]').popover('hide');
          }
  
      });
  
  
      var dropdown = $(document).find('#wildcarddropdown');
  
      $(document).on('shown', '[data-toggle="popover"]', function(){
          console.log($(dropdown).val());
      });
  
  
  });
  </code></pre>