更新后“刷新”jquery UI 选择菜单答案

【问题标题】：'refresh' jquery UI selectmenu after update更新后“刷新”jquery UI 选择菜单
【发布时间】：2012-04-23 09:24:26
【问题描述】：

我有一个获取请求，它获取一堆类别信息来填充<select>。我正在使用 jQuery UI Selectmenu 来设置我的选择样式。

所以我的 jQuery 看起来有点像这样：

//Initalise the selectmenu
$("select").selectmenu({ style: 'dropdown' });

$.get("http://localhost/somedata?cat=2", function (data) {
    $.each(data, function (index, itemData) {
        $("<option value='" + itemData.Id + "'>" + itemData.Name + "</option>").appendTo("#selectList");
    });
});

但是，这会填充<select>，但不会更新 jQuery UI 选择菜单。我需要做什么才能让选择菜单“重新绘制”以便新值出现在选择菜单中？

【问题讨论】：

请注意：三个版本的选择菜单具有不同的功能、API 和文档！您使用哪个版本？代码示例？有关更多信息，请参阅 wiki：github.com/fnagel/jquery-ui/wiki/Selectmenu
这对我有帮助 $(document).on('change', "body", function(){ $( ".ui-selectmenu" ).selectmenu(); });跨度>

标签： jquery jquery-ui

【解决方案1】：

您可以使用恰当命名的refresh 方法，记录在development wiki：

$("select").selectmenu({ style: 'dropdown' });

$.get("http://localhost/somedata?cat=2", function(data) {
    $.each(data, function(index, itemData) {
        $("<option value='" + itemData.Id + "'>" + itemData.Name
            + "</option>").appendTo("#selectList");
    });

    $("select").selectmenu("refresh");
});

更新：不幸的是，refresh 函数已记录在案，但似乎尚未实现。另一种选择是销毁小部件并重新创建它：

$("select").selectmenu("destroy").selectmenu({ style: "dropdown" });

【讨论】：

$("select").selectmenu("refresh");似乎没有任何影响，被调用但对 jQuery UI 元素没有影响。
@CLiown，这很不幸。我检查了 wiki 中列出的两个存储库，refresh 方法似乎还没有实现。可能会在这个小部件在主树中可用时。另一方面，通过调用selectmenu() 重新创建小部件在未来可能无法正常工作，在这种情况下，您可能希望事先销毁小部件，例如$("select").selectmenu("destroy").selectmenu({style: "dropdown"});.
$("select").selectmenu("destroy").selectmenu({ style: "dropdown" });为我做了伎俩。谢谢！
selectmenu('refresh') 现在有效，是正确的答案。
错误：在初始化之前无法调用选择菜单上的方法；试图调用方法“刷新”

【解决方案2】：

这是一个非常古老的问题，所以目前有a much simpler solution 可用：

$("select").selectmenu("refresh");

【讨论】：

并不奇怪，希望您可以从之前的 cmets 中看到，2012 年的“刷新”不起作用，但确实在 2015 年开始起作用。
感谢您的指出，我在 2019 年寻找答案，直到看到您的评论并按“查看更多回复”后才看到。希望这对将来像我这样的人有所帮助。

【解决方案3】：

我会推荐ajax方式..试试这个

$(document).ready(function(){
  $.ajax({
                   url :/somedata?cat=2,          

                   success:function(data){
                        $.each(data, function (index, itemData) {
        $("<option value='" + itemData.Id + "'>" + itemData.Name + "</option>").appendTo("#selectList");
    });

                   }
                });
$("select").selectmenu({ style: 'dropdown' });
});

【讨论】：