JSFiddle - React, Tailwind, and code Playground

by Francis Trujillo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<h1>This works for jQuery 1.10.1, but not any other plugin.</h1>
<h3>I have https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js as external resource.</h3>
<form action="#">
    <select name="data[sport]" class="selectmenu" id="sport">
        <optgroup label="My Sports">
            <option value="Kayaking">Kayaking</option>
            <option value="Rock climbing">Rock climbing</option>
        </optgroup>
        <optgroup label="Other Sports">
            <option value="Surfing">Surfing</option>
            <option value="Skateboarding">Skateboarding</option>
        </optgroup>
    </select>
    <br/>
    <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>Medium</option>
        <option value="Fast">Fast</option>
        <option value="Faster">Faster</option>
    </select>
</form>

CSS

/* demo styles */
 body {
    font-size: 12pt;
    font-family:"Verdana", sans-serif;
}
label, select, .ui-select-menu {
    display: block;
}
select {
    width: 200px;
}

JavaScript

$(function () {
    $('#sport').selectmenu();
    $('#speed').selectmenu();
});