有没有一种方法可以像显示和选择一样在 HTML 中的 select2 中设置选定的 id/文本?
我正在使用 jquery select2 版本 4.0.0
这是代码:
$("#users").select2({
placeholder: "select user...",
escapeMarkup: function (markup) { return markup; },
ajax: {
url: "users.json",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (response, page) {
return {
results: response.data
};
},
cache: true
},
templateResult: function(item){
if (item.loading) {
return item.text;
}
return item.username + " <small><i>(" + item.role + ")</i></small> "; // display data in html
},
templateSelection: function(item){
if (item.username){
return item.username + " <small><i>(" + item.role + ")</i></small> "; // select row in html
}
return item.text; // for placeholder
}
});
要设置我选择的值:
// bring data for to set selected value, data contains fields data
var selected_user_id = data.id,
// this is the content that I need to use as it is HTML content
selected_user_text_html = data.username + " <small><i>(" + data.role + ")</i></small> ",
// this is the one that I am using and is not html because there is no way to put html inside a option select item
selected_user_text_regular = data.username + " (" + data.role + ") ";
// set selected value
$("#users").append("<option value='"+selected_user_id+"' selected='selected'>"+selected_user_text_regular+"</option>");
// trigger update
$("#users").trigger("change");
有没有一种方法可以在 HTML 而不是纯文本中设置所选文本?
最佳答案
是的,你可以。 Select2 有两个有用的选项“templateSelection”和“templateResult”,两者都是函数,您可以创建任何您想要的 html 包装器。 只需将选项传递给 select2() 方法,就像这样......
var data = [{id: 100, text: "AAAAAA"}, {id: 200, text: "BBBB"}]
var formatState = function(result) {return $("<b>"+result.text+"</b>")}
var formatSelection = function(selection){return $("<b>"+selection.text+"</b>") }
$(".js-example-basic-single").select2({ data:data,templateResult: formatState, templateSelection: formatSelection
}).val(100).change();
您应该会看到带有 id:100 的选项已被选中。
希望对你有帮助;
关于javascript - Select2 在 HTML 中设置选定值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33027664/