I'm wanting to open a <select> when clicking on it's parent .select class.

https://jsfiddle.net/6o31gfwa/ - if you click the orange block you will see that the select opens, but then clicking on an option it doesn't close the select. How may I fix this?

<label class="select">
    <select>
        <option>Body Fat</option>
        <option>Height</option>
        <option>Jean Size</option>
        <option>Chest</option>
        <optio>Pulse</option>
    </select>
</label>

$('body')
    .on('click', '.select', function(event) {
        event.preventDefault();

        var i = $('.select').index($(this)),
            e = document.createEvent('MouseEvents');

        e.initMouseEvent('mousedown');
        $('select')[i].dispatchEvent(e);

    });