How can I make a <select> in a popover display the selected option on console?

Question

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.

<div>
    <button type="button" id="popover" data-toggle="popover">Popover</button>
</div>

This is my Javascript:

     var content:    '<form role="form">' +
                            '<div class="form-group">' +
                                '<label>Wildcard:</label>'+
                                '<select name="options" id="wildcarddropdown">' +
                                    '<option value="yes">Yes</option>'+
                                    '<option selected="selected" value="no" >No</option>'+
                                '</select>' +
                            '</div>' +
                            '<div class="wildcard" style="display: none">' +
                                '<div class="form-group">' +
                                    '<label for="inputlabel">Label:</label>'+
                                    '<input type="text" id="inputlabel">' +
                                '</div>' +
                                '<div class="form-group">' +
                                    '<label for="datatype">Data Type:</label>' +
                                    '<select name="datatype" id="datatype">' +
                                        '<option value="numeric">Numeric</option>' +
                                        '<option value="string">String</option>' +
                                   '</select>'+
                                '</div>' +
                            '</div>' +
                             '</form>';

    $('[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' && $(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());
    });


});

Answer 1

$(function() {
    $(document).on('change', '#wildcarddropdown', function(){
        console.log(this.value);
    });
    $('#popover').on('click',function() {
        $('#wildcarddropdown').change();
    });
});