How to open JQuery selectmenu plugin from javascript?

Question

The selectmenu's open method isn't working.

$( "#speed" ).selectmenu('open'); // doesn't work

Ideas?

fiddle

HTML

<button id="btn">open it</button>
<fieldset>
    <label for="speed">Select a speed</label>
    <select name="speed" id="speed">
        <option value="Slower">Slower</option>
        <option value="Slow">Slow</option>
        <option value="Medium" selected="selected">Medium</option>
        <option value="Fast">Fast</option>
        <option value="Faster">Faster</option>
    </select>
</fieldset>

JS

$(function () {
    $( "#speed" ).selectmenu();
    $('#btn').click(function(){
        $( "#speed" ).selectmenu('open'); // doesn't work
    });
});

CSS

fieldset {
    border: 0;
}
label {
    display: block;
    margin: 30px 0 0 0;
}
select {
    width: 200px;
}
.overflow {
    height: 200px;
}

Answer 1

I took a look at what's going on. It's opening ok, but during open it's registering a document click handler that closes the menu in response to any click outside the menu, and the click on the button is immediately handled by this handler. You should be able to stop the handler handling this very click like so:

$(function () {
    $( "#speed" ).selectmenu();
    $('#btn').click(function(event){
        $( "#speed" ).selectmenu('open');
        event.stopPropagation();
    });
});