JSFiddle - React, Tailwind, and code Playground

by johntrepreneur

HTML

<link rel="stylesheet" href="http://view.jqueryui.com/selectmenu/themes/base/jquery.ui.all.css">
<script src="http://view.jqueryui.com/selectmenu/jquery-1.10.2.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.core.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.position.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.menu.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<link rel="stylesheet" href="http://view.jqueryui.com/selectmenu/demos/demos.css">
<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>

CSS

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

JavaScript

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