JSP + JQuery UI Selectmenu + default text

Question

I have the next select on the view:

<div class="sort">
    <label for="sort"><span>Sort by:</span></label>
    <select name="sort" id="sort">
        <option selected="selected" disabled="disabled" style="display:none;">Choose...</option>
        <option
            <c:if test="${pagination.sortOn eq 'time' and pagination.asc}">selected="selected"</c:if>
            data-text="DESC" value="time"
            data-order="asc">
            DESC
        </option>
        <option
            <c:if test="${pagination.sortOn eq 'time' and not pagination.asc}">selected="selected"</c:if>
            data-text="ASC" />" value="time"
            data-order="desc">
            ASC
        </option>
    </select>
</div>

This is how I place JQuery widget on this select:

$('#sort').goodsListSelect({
        width : 180,
        appendTo : ".sort",
        change : function() {
            var option = $(this).find(":selected:not([disabled])");
            if (option.val()) {
                utils.reloadWithParams({
                    "page" : 1,
                    "sort" : option.val(),
                    "order" : option.attr("data-order")
                });
            }
        }
    });

The problem is I cant get working the first option "Choose...". It should be displaying only if user not choosen any other option.

I've tried the following answers, but they are not working for me:

1. HTML select: how to set default text which won't be shown in drop-down list?

2. How to show disable HTML select option in by default?

How such behavior may be achieved ?

Answer 1

In general, override the selectmenu widget like this

jQuery.widget(
    'custom.selectmenu_with_title',
    $.ui.selectmenu,
    {
        _setText: function( element, value ) {
            if (element.hasClass('ui-selectmenu-text')) {
                element.text('Whatever should be the title');
            } else if ( value ) {
                element.text( value );
            } else {
                element.html( " " );
            }
        }
    }
);

and call this one instead the original.

$('#sort').selectmenu_with_title(....);

In your special case, you do not use the orignial selectmenu widget, but a custom version called goodsListSelect. So - insert the custom _setText method into the definition of your custom widget.