Adding Placeholder Text To Selectmenu

How to extend the jQuery UI selectmenu widget to support placeholder text when there's no selected options.

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/redmond/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<select name="speed">
    <option>Slower</option>
    <option>Slow</option>
    <option>Medium</option>
    <option>Fast</option>
    <option>Faster</option>
</select>

CSS

body {
    margin: 2em;
    font-size: 0.8em;
}

select {
    width: 200px;
}

JavaScript

$.widget( 'app.selectmenu', $.ui.selectmenu, {
    _drawButton: function() {
        this._super();
        
        var selected = this.element
                .find( '[selected]' )
                .length,
            placeholder = this.options.placeholder;
        
        if ( !selected && placeholder ) {
            this.buttonText.html( placeholder );    
        }
    }
});

$( '[name="speed"]' ).selectmenu({
    placeholder: '<span class="placeholder">Select a speed</span>'
});