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

JSP + JQuery UI Selectmenu + default text

本文关键字：默认 文本 菜单 UI JQuery JSP 选择      更新时间：2023-09-26

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

<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")
                });
            }
        }
    });

问题是我无法开始使用第一个选项"选择..."。仅当用户未选择任何其他选项时，它才应显示。

我

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

  1. HTML选择：如何设置下拉列表中不会显示的默认文本？

  2. 默认情况下如何显示禁用HTML选择选项？

如何实现这种行为？

通常，像这样覆盖选择菜单小部件

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方法插入到自定义小部件的定义中。

相关文章：