如何使用multilineSelectmenu(jQuery UI Widget)处理添加的选项

Question

我想使用multilineSelectmenu (https://github.com/ainterpreting/jquery-multilineSelectmenu(的jquery小部件扩展。然而打开选择框一次后，新选项(通过单击"添加项目"按钮添加(不会出现在框中。 下面是一个示例。以下是多行选择菜单的内容

/* this is the custom selectmenu widget extension add multiline and css theming support */
var multilineSelectmenu = $.widget("ui.multilineSelectmenu", $.ui.selectmenu, {
    _setText: function (element, value) {
        if (value) {
            if (value.indexOf('|') !== -1) {
                var lines = value.split('|');
                value = '<span class="ui-selectmenu-menu-item-header">' + lines[0].trim() + '</span>';
                for (var i = 1; i < lines.length; i++) {
                    value = value + '<span class="ui-selectmenu-menu-item-content">' + lines[i].trim() + '</span>';
                }
            }
            element.html(value);
        } else {
            element.html("&#160;");
        }
    }
});

我搜索了几个小时的这个问题，但由于我对jquery-ui及其小部件了解不多，所以我无法自己解决。请帮忙！提前谢谢。

Answer 1

添加新选项后尝试销毁并重新创建小部件：

$('#button').click(function(){
        $('#select').append($('<option>').html('new| option'));
        $("#select").multilineSelectmenu('destroy');
        $("#select").multilineSelectmenu();  
 })

例如，请参阅此处