JSP + JQuery UI 选择菜单 + 默认文本答案

【问题标题】：JSP + JQuery UI Selectmenu + default textJSP + JQuery UI 选择菜单 + 默认文本
【发布时间】：2015-09-05 02:33:07
【问题描述】：

我在视图上有下一个选择：

<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>

这就是我在这个选择上放置 JQuery 小部件的方式：

$('#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")
                });
            }
        }
    });

问题是我无法使用第一个选项“选择...”。只有当用户没有选择任何其他选项时，它才应该显示。

我尝试了以下答案，但它们对我不起作用：

如何实现这种行为？

【问题讨论】：

标签： java javascript jquery jsp jquery-ui

【解决方案1】：

一般，像这样覆盖选择菜单小部件

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( "&#160;" );
            }
        }
    }
);

并称它为原始版本。

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

在您的特殊情况下，您不使用原始的 selectmenu 小部件，而是使用称为 goodsListSelect 的自定义版本。所以 - 将自定义 _setText 方法插入到自定义小部件的定义中。

【讨论】：