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

Question

我有一个获取请求，它获取一堆类别信息来填充<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 选择菜单。我需要做什么才能让选择菜单“重新绘制”以便新值出现在选择菜单中？

Answer 1

您可以使用开发 wiki中记录的恰当命名的refresh方法：

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

Answer 2

这是一个非常古老的问题，所以目前有一个更简单的解决方案可用：

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

Answer 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' });
});