我有一个下拉列表,我使用Selectize.js来装饰它以使用它的搜索和其他东西。
但是我通过另一个下拉列表ID从服务器获取数据。 所以我想要的是,当我从服务器获取新数据并将这些项目添加到此下拉菜单时,用户将能够选择这些项目。
我目前的代码是:
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();
角度控制器
$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)
});
}
但下拉列表不会更新,但下拉列表会显示选项。 但是选择不会更新其项目。
如果你能帮助我,我将很高兴。
谢谢。答案 0 :(得分:2)
我不确定这是否是你需要的。 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 = {};
}
});
}
});
});
希望这对你有用。