如何使用 multilineSelectmenu 处理添加的选项（jQuery UI Widget）

Question

我想使用 multilineSelectmenu (https://github.com/ainterpreting/jquery-multilineSelectmenu) 的 jquery 小部件扩展。然而，即使打开 select 框一次，新选项（通过单击按钮 "add item" 添加）也不会出现在框中。 Here is an example.下面是multilineSelectmenu的内容

/* 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和它的widget了解不多，所以我无法自己解决。请帮忙！提前致谢。

Answer 1

尝试在添加新小部件后销毁并重新创建小部件option/options:

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

See here for example

如何使用 multilineSelectmenu 处理添加的选项（jQuery UI Widget）

How to handle added options with multilineSelectmenu (jQuery UI Widget)

jquery

jquery-ui

jquery-ui-selectmenu