我正尝试使用freeform文本选项将文本附加到select2中添加的任何新值中。附加文本我想设置选择元素（在我的情况下通过mvc帮手）。Select2 templateResult数据没有可供引用的元素
问题是进入templateResult的数据没有元素。在我搜索的任何地方，data.element用于进入DOM，但它不适合我，我不知道为什么。如果我查看createTag函数，参数也没有元素。容器也仅仅是一个“李”，显然还没有在这里，没有孩子或父母。
这里是代码：
$('.custom-dropdown').each(function() {
$(this).css('width', '100%');
if ($(this).hasClass('freeform')) {
$(this).select2({
tags: true,
createTag: function(params) {
return {
id: params.term,
text: params.term,
newOption: true
}
},
templateResult: function(data, container) {
var $result = $("");
$result.text(data.text);
if (data.newOption) {
//data.element is undefined here!!!
}
}
return $result;
},
placeholder: "Press ENTER for list of options",
allowClear: true,
selectOnClose: true
});
} else {
$(this).select2({
placeholder: "Press ENTER for list of options",
allowClear: true,
selectOnClose: true,
});
}
$(this).on('select2:select', function(e) {
if (e.params.data.text != '') {
var id = $(this).attr('id');
var select2 = $("span[aria-labelledby=select2-" + id + "-container]");
select2.removeAttr('style');
}
}); $(this).on('select2:close', function() {
$(this).focus();
});
});
选择的一个例子是：
选择class="custom-dropdown freeform"data-appendme="blorg"
1 回答
templateResult被用于创建DOM。创建它之前，您无法访问该dom。
也许你需要的东西是这样的：
（附加 “数据appendme” 的价值，该选项的文本createTag）
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>testtitle>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js">script>
head>
<body>
<link rel="stylesheet" href="style.css">
<script src="index.js">script>
<select class="custom-dropdown freeform" data-appendme="blorg">select>
<script>
$('.custom-dropdown').each(function() {
var $select = $(this);
$select.css('width', '100%');
if ($select.hasClass('freeform')) {
$select.select2({
tags: true,
createTag: function (params) {
return {
id: params.term,
text: params.term + $select.data('appendme'),
newOption: true
}
},
templateResult: function (data, container) {
var $result = $("");
$result.text(data.text);
return $result;
},
placeholder: "Press ENTER for list of options",
allowClear: true,
selectOnClose: true
});
} else {
$(this).select2({
placeholder: "Press ENTER for list of options",
allowClear: true,
selectOnClose: true,
});
}
$(this).on('select2:select', function (e) {
if (e.params.data.text != '') {
var id = $(this).attr('id');
var select2 = $("span[aria-labelledby=select2-" + id + "-container]");
select2.removeAttr('style');
}
});
$(this).on('select2:close', function() {
$(this).focus();
});
});
script>
body>
html>如果你不这样做想要在选项中使用“blorg”，但希望在选择标记中使用它，则可以用templateResult中的空字符串替换它。
