JSFiddle - React, Tailwind, and code Playground

by Francis Trujillo

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<h3>I finally got this to work.  It was compatability mode in IE11. </h3>

<pre> The reason this was working here and not in our intranet is that IE11 had IE7
    compatability mode turn on.  Well, I could not turn off for everyone....
    So, I added the 1st META line to my web page to turn off compatability mode.
    https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx   
    MUST BE FIRST LINE IN META TAGS in the head section!!! 
    Not needed in this fiddle because this is on the internet, not intranet.    
</pre>
<pre>

        &lt;meta http-equiv="X-UA-Compatible" content="IE=8,9,10,EDGE" /&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
</pre>

<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/>
    <div>
        <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>
    </div>
</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();
});