我遇到select2的问题,在我输入商品后我想再次使用相同的下拉列表,我似乎无法删除之前选择的商品
例如,假设我的ID是"#StreamName",我认为这会清除它:
$("#StreamName").val(null).trigger("change");
但它似乎仍然显示上一个选定的项目。从查看html看来,我通过这样做蛮力:
$("#select2-StreamName-container").html("");
但似乎我没有正确使用API,所以我想看看是否有其他建议或者我是否遗漏了某些内容。
答案 0 :(得分:10)
看起来清除Select2的正确方法是您最初建议的this answer建议。
$(document).ready(function() {
$("#StreamName").select2();
$("#StreamName").val(null).trigger("change");
});
<select id="StreamName">
<option value="AL">Alabama</option>
<option value="CA">California</option>
<option value="WY">Wyoming</option>
</select>
即使使用远程数据源,这仍然可以清除Select2输入:
$("#StreamName").val(null).trigger("change");
$(document).ready(function() {
$("#StreamName").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function(params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function(data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function(markup) {
return markup;
}, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});
$("#StreamName").val(null).trigger("change");
// For testing...
$('#set-null').click(function() {
$("#StreamName").val(null).trigger("change");
});
});
function formatRepo(repo) {
if (repo.loading) return repo.text;
var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
if (repo.description) {
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
}
markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";
return markup;
}
function formatRepoSelection(repo) {
return repo.full_name || repo.text;
}
<select id="StreamName">
<option value="3620194" selected="selected">select2/select2</option>
</select>