刷新 selectize 中的新选项

Question

我有一个下拉菜单，我用 Selectize.js 装饰它以使用它的搜索和其他东西。

但我通过另一个下拉列表 id 从服务器获取数据。所以我想要的是，当我从服务器获取新数据并将这些项目添加到此下拉列表时，用户将能够 select 这些项目。

我当前的代码是：

HTML

<select id="sendmail-roles" ng-model="SelectedUserRole"  ng-change="GetUsers()" ng-options="t.Key as t.Value for t in RolesList">
     <option selected="selected" value="">Select Role</option>
</select>

<select id="sendmail-users" ng-model="SelectedUser" ng-options="t.Key as t.Value for t in UsersList">
     <option selected="selected" value="">Select User</option>
</select>

JS

$("#sendmail-users").selectize();

Angular 控制器

$scope.GetUsers = function () {
    $http({
        url: "MessageHandler.ashx?mode=getuserslist&roleid=" + $scope.SelectedUserRole,
        method: "GET",
    }).success(function (data) {
    $scope.UsersList = data;

    setTimeout(function () {
        var sel = $("#sendmail-users");
        var selectize = sel[0].selectize;
        selectize.refreshOptions(false);
    }, 1)
  });
}

但是下拉菜单没有更新，尽管下拉菜单中填满了选项。但是 selectize 不更新它的项目。

如果你能帮助我，我会很高兴。

谢谢。

Answer 1

我不确定这是否是您需要的。 Selectize 缓存已查询的项目。如果您想重新查询和重新呈现项目，您应该清除缓存。

写一行代码就可以实现：

yourSelectizeObject.loadedSearches = {};

学习我的完整示例：

// initialize privileged users
    $(this).find(".selectize-privileges").each( function () {
      $(this).selectize({
        plugins: {
          'remove_button': {
            'title': 'Usuń'
          },
        },
        valueField: 'id_user',
        labelField: 'name',
        searchField: ['name','teamname','skills'],
        maxItems: null,
        maxOptions: null,
        create: false,
        preload: true,
        //persist: false,
        render: {
          item: function(item, escape) {
            return '<div>' +
              (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
              (item.teamname ? ' <span class="teamname">' + escape(item.teamname) + '</span>' : '') +
            '</div>';
          },
          option: function(item, escape) {
            return '<div>' +
              '<span class="name">' + escape(item.name) + '</span>' +
              (item.teamname ? ' <span class="teamname">' + escape(item.teamname) + '</span>' : '') +
              (item.skills ? '<span class="skills">' + escape(item.skills) + '</span>' : '') +
            '</div>';
          }
        },
        load: function(query, callback) {
          var search_in = [];
          this.$input.closest('form').find('input[name="search_in[]"]:checked').each(function() { search_in.push($(this).val()); });
          var selPrPriv = this;
          $.ajax({
            url: 'project-privilege-details.html',
            type: 'POST',
            dataType: 'json',
            data: {
              id_project: id_project,
              search_in: search_in,
              q: query,
              loaded: $(selPrPriv).attr('data-loaded')
            },
            error: function() {
              callback();
              selPrPriv.loadedSearches = {};
            },
            success: function(res) {
              callback(res.users);
//              selPrPriv.refreshOptions();
              if ($(selPrPriv).attr('data-loaded') != '1')
              {
                selPrPriv.setValue(res.id_user_privilege);
                $(selPrPriv).attr('data-loaded', '1');
              }
              else
                selPrPriv.refreshItems();
              selPrPriv.loadedSearches = {};
            }
          });
        }
      });
    });

希望这对你有用。

刷新 selectize 中的新选项

refresh new options in selectize

angularjs

selectize.js