JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<select id="selectmenu">
    <option data-content="hi">One</option>
    <option>Two</option>
    <option>Three</option>
</select>

CSS

select { width: 200px; }

JavaScript

$.widget('custom.myselectmenu', $.ui.selectmenu, {
_renderItem : function(ul, item) {
	var itemElem = this._super(ul, item);
	itemElem.html(item.element.attr('data-content'));
    console.log( itemElem );
	return itemElem;
},
// Overriding to make label consistent.
refresh : function() {
	this._refreshMenu();
	// The following line incorrectly sets the buttonText to the custom rendered content
	// this._setText( this.buttonText, this._getSelectedItem().text() );
	this._setText(this.buttonText, this.items[this.element[0].selectedIndex].label);
	this._setOption('width', this.options.width);
}});

$( "select" ).myselectmenu();