Temp jQuery UI Selectmenu Widget Testing

https://github.com/fnagel/jquery-ui/wiki/Selectmenu

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js"></script>
<script src="https://github.com/fnagel/jquery-ui/raw/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://raw.github.com/fnagel/jquery-ui/selectmenu/themes/base/jquery.ui.selectmenu.css">
<form action="#">
    <br /><br /><br />
    <fieldset>
        <label for="speedA">Select a Speed:</label>
        <select name="speedA" id="speedA" style="height: 50px; overflow-y:scroll">
            <option value="1">Item 1</option>
            <option value="2">Item 2</option>
            <option value="3">Item 3</option>
            <option value="4">Item 4</option>
            <option value="5">Item 5</option>
            <option value="6">Item 6</option>
            <option value="7">Item 7</option>
            <option value="8">Item 8</option>
            <option value="9">Item 9</option>
            <option value="10">Item 10</option>
            <option value="11">Item 11</option>
            <option value="12">Item 12</option>
            <option value="13">Item 13</option>
            <option value="14">Item 14</option>
        </select>
    </fieldset>
    <br /><br /><br />
    <input type="button" id="btn" value="Break Selectmenu" />
</form>

CSS

/* Selectmenu styles */
.ui-selectmenu { display: block; display: inline-block; position: relative; height: 2.2em; vertical-align: middle; text-decoration: none; overflow: hidden; zoom: 1; }
.ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top: 50%; }
.ui-selectmenu-menu { padding:0; margin:0; list-style:none; position:absolute; top: 0; display: none; overflow: auto; z-index: 1005;} /* z-index: 1005 to make selectmenu work with dialog */
.ui-selectmenu-open { display: block; }
.ui-selectmenu-menu-popup { margin-top: -1px; }
.ui-selectmenu-menu-dropdown { }
.ui-selectmenu-menu li { padding:0; margin:0; display: block; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; border-right-width: 0 !important; border-left-width: 0 !important; font-weight: normal !important; }
.ui-selectmenu-menu li a,.ui-selectmenu-status { line-height: 1.4em; display: block; padding: .405em 1em; outline:none; text-decoration:none; }
.ui-selectmenu-menu li.ui-state-disabled a, .ui-state-disabled { cursor: default; }
.ui-selectmenu-menu li.ui-selectmenu-hasIcon a,
.ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 20px; position: relative; margin-left: 5px; }
.ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; }
.ui-selectmenu-status { line-height: 1.4em; }
.ui-selectmenu-open li.ui-selectmenu-item-focus a { }
.ui-selectmenu-open li.ui-selectmenu-item-selected { }
.ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; }
.ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; }
.ui-selectmenu-menu li .ui-selectmenu-item-content { }
.ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; }
/* for optgroups */
.ui-selectmenu-menu .ui-selectmenu-group { font-size: 1em; }
.ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label { line-height: 1.4em; display:block; padding: .6em .5em 0; font-weight:...

JavaScript

$(function() {
    $('select#speedA').selectmenu();
    $('.ui-selectmenu').addClass('ui-state-error');
    
    $('#btn').click(function() {
        $('select#speedA').html('<option value="Item 1">Item 1</option>');
        $('select#speedA').selectmenu();
    });
});