未调用Select2选项templateResult
指的是在使用Select2插件时，没有调用templateResult选项。Select2是一个功能强大的下拉选择框插件，它可以替代原生的HTML下拉框，提供更加灵活和用户友好的选择体验。
templateResult选项是用于自定义下拉框中每个选项的显示样式和格式的。通过调用templateResult选项，我们可以根据自己的需求定制每个选项的呈现方式，例如添加图标、修改文字颜色等。
在调用templateResult选项时，一般会使用一个函数来处理每个选项的显示样式。这个函数会接收一个参数，即当前的选项数据，并返回一个字符串作为该选项的HTML内容。我们可以通过该函数灵活地操作选项的显示。
对于Select2未调用templateResult选项的问题，可以通过以下步骤解决：
- 在初始化Select2插件时，传入templateResult选项，并指定一个处理函数。例如：
$('select').select2({
templateResult: function(option) {
// 自定义选项显示样式的处理逻辑
return '<span class="custom-option">' + option.text + '</span>';
}
});- 在处理函数中，可以根据option参数的值来自定义选项的显示样式。上述示例中，我们使用一个自定义的CSS类名"custom-option"来修饰每个选项的文字。
需要注意的是，templateResult选项只会在下拉框展开时被调用，用于生成每个选项的HTML内容。如果未调用templateResult选项，Select2将使用默认的显示方式来呈现选项。
推荐的腾讯云相关产品是Tencent Cloud Select2插件（本示例仅为举例，并非真实存在的产品）。Tencent Cloud Select2插件是腾讯云提供的一种基于Select2插件的云计算解决方案，它可以帮助开发者快速构建高效、灵活的下拉选择框功能，并提供了丰富的定制选项和扩展功能。
更多关于Tencent Cloud Select2插件的信息和产品介绍，您可以访问以下链接地址：
相关·内容
1回答
我正在尝试使用select2 jquery插件，为了格式化结果，我找到了templateResult选项，如下所示：
$(".my-select").select2({
templateResult: function (obj) {
//templating
}
});
我想知道回调作为参数接受的对象的结构和方法，但是我没有找到任何关于它的文档。
它怎麽工作?
浏览 0提问于2015-05-27得票数 0
我使用的是Select2 4.0。我有一个选项列表，其中一些是“删除”的，我想指出哪些是“删除”的。我的select元素是这样的：
<style>.deleted { color: red; }</style>
<select name="itemid" id="item-list" tabindex="1">
<option></option>
<option value="1">Item 1</option>
<
浏览 5提问于2015-11-26得票数 20
回答已采纳
1回答
我可以通过脚本中的以下代码成功地获得数组结果
$.ajax({
url: "/search",
dataType: 'json',
type: "GET",
data: {
query: "test",
},
success:function(result){
console.log(result);
}
});
但是当我尝试在select2-rails中使用ajax时
$(".select2&
浏览 1提问于2016-09-17得票数 0
回答已采纳
我想通过select2 v4使用templateResult选项来格式化我的结果。我有以下代码： $(".search").select2({
minimumInputLength: 3,
ajax: {
url: url,
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: data.items
浏览 16提问于2019-02-27得票数 4
回答已采纳
1回答
有没有办法按名称对select2生成的列表进行排序？我有一些代码：
var dataUser = [{
"id": "5",
"text": "BTest"
}, {
"id": "2",
"text": "ATest"
}, {
"id": "8",
"text": "CTest"
}, {
"id": "13",
浏览 3提问于2016-01-14得票数 4
回答已采纳
1回答
我创建了一个自定义Vue组件。
Vue.component('select2', {
props: ['apiurl', 'id', 'value'],
template: '#select2-template',
mounted: function(){
var vm = this
var apiURL = vm.$options.propsData['apiurl']
$(this.$el).select2({
浏览 5提问于2020-05-12得票数 1
回答已采纳
我正在使用jQuery插件 (V4)，并在所有选择中调用它，例如：
var select2_params = {
minimumResultsForSearch: Infinity,
templateResult: applyCategoryClasses,
templateSelection: applyCategoryClasses,
};
$('select').select2(select2_params);
但是，对于某些选择，我想添加额外的选项，例如，如果它们在某个父元素中。
这是可能的，还是我必须销毁各自的select元素，然后再用新的选
浏览 11提问于2016-12-29得票数 1
回答已采纳
JS
$("#location").select2({
ajax: {
url: "/search/locations",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
};
},
processResults: function
浏览 2提问于2016-05-16得票数 2
回答已采纳
我使用的是select2 4.0.5
目前，我的select2初始化代码如下所示：
/** Basic select2*/
$('.am_select2').select2({
escapeMarkup: function (markup) {
return markup;
},
templateResult: formatResult,
templateSelection: formatResult,
tags: true,
createTag: function (params) {
// Do
浏览 1提问于2020-07-28得票数 0
1回答
当我更改另一个select2下拉列表的值时，我尝试以编程方式更改select2下拉列表中的数据集。
我的问题是奇怪的，因为它似乎改变了徽章的价值，但没有选择本身。您可以在徽章中看到2和3，但是一个数据集中的文本的值是完全不同的，但是它不会改变选项。
这是一把小提琴，用来说明我的意思。
这是formatText函数：
function formatText (icon) {
if(icon.badge == undefined){
return $('<span>' + icon.text + '</span>');
}
浏览 3提问于2020-10-19得票数 0
回答已采纳
2回答
是否有一种方法可以在select2中设置选定的id/文本，就像正在显示和选择的一样？
我正在使用jQuery4.0.0版本的select2
这是代码：
$("#users").select2({
placeholder: "select user...",
escapeMarkup: function (markup) { return markup; },
ajax: {
url: "users.json",
dataType: 'json',
delay:
浏览 0提问于2015-10-08得票数 9
我正在使用，现在当我点击select2输入字段时，它会打开下拉列表，但我不想在点击时打开下拉列表，我想在击键时打开select2选项下拉列表，任何帮助都将不胜感激。
下面是我的代码：
share_users_select = $('#sharing-user-email').select2
tags: true,
placeholder: 'Enter Email Address',
selectOnClose: true,
closeOnSelect: false,
tokenSeparato
浏览 0提问于2017-09-08得票数 0
我在我的Angular2项目中使用，但是我有问题，我不能在我的select2中呈现选项。我得到了数据，但我不能在templateResult中显示选项。
HTML
<select2 [options]="options"></select2>
TS
public options: Select2Options;
public ajaxOptions: any;
public ngOnInit(): void {
this.ajaxOptions = {
url: 'https://localhost:8080/ajax
浏览 0提问于2017-04-04得票数 0
我试图将文本添加到select2和freeform文本选项中的任何新增值中。我想在select元素上设置附加的文本(在我的例子中，是通过mvc助手)。
问题是进入templateResult的数据没有一个元素。在我搜索过的所有地方，data.element都是用来进入DOM的，但是它不适合我，我也不知道为什么。如果我查看createTag函数，则params也没有任何元素。此外，容器只是一个“李”显然还没有在王国，没有孩子或父母。
这里是代码：
$('.custom-dropdown').each(function() {
$(this).css('width
浏览 5提问于2017-12-27得票数 3
回答已采纳
为此，我对select中的每个选项进行了动态重新着色。我已经尝试了打开和打开，当它们被调用时，正在创建的菜单仍然存在。
$(document).on("select2:opening", function () {
console.log('Here', $('#select2-SELECTNAME-results li').length);
$('#select2-SELECTNAME-results li').each(function(k,ele){
console.log(k, $(ele)
浏览 0提问于2018-03-21得票数 1
我正在创建一个select标签下拉列表，将国家名称作为选项，我想在其中添加受尊敬的国家标志:我使用了这个HTML
<div class="form-group" id="abc">
<label class="col-md-2 control-label">Language: </label>
<div class="col-md-6">
<select class="select2me form-control"
浏览 1提问于2016-02-04得票数 0
回答已采纳
我添加Bootstrap4主题使用到select2，并需要添加<span></span>到文本使用formatState方法。
我的HTML代码是：
<div class="fieldset fieldset-1">
<label for="color">Choose color</label>
<select name="color" class="select2">
<
浏览 15提问于2020-03-05得票数 1
回答已采纳
我正在尝试使用templateResult格式化我的select2选项，以便在选择文本前面包含一个方框图标。
不幸的是，它不起作用，尽管我遵循了文档。字体令人敬畏的图标显示，但文本不知何故丢失在翻译
function formatFA(icon) {
if (!icon.id) { return icon.text; }
var $icon = $(
'<i class="fa fa-circle" style="color:green"></i> ' + icon.text + '
浏览 6提问于2015-06-10得票数 0
回答已采纳
我在web forms .net应用程序中使用Select2 4.0.3。我正在尝试使用not服务加载远程数据，但它不像预期的那样工作。
我面临的第一个问题是webservice方法没有被调用，并且我得到了一个控制台错误：
System.InvalidOperationException: Missing parameter: text.
at System.Web.Services.Protocols.ValueCollectionParameterReader.Read(NameValueCollection collection)
at System.Web.Services
浏览 2提问于2017-07-27得票数 2
我想将类pink添加到我的select2选择框中。它适用于选项，但不适用于框：
$("select").select2({
templateResult: function (data, container) {
if (data.element) {
$(container).addClass($(data.element).attr("class"));
}
return data.text;
}
});
.yellow { background-color: yellow; }
.blue { backgro
浏览 6提问于2017-06-07得票数 0
回答已采纳
1回答
我有一个select2选择，在这个选择中，我要根据值更改背景色。
但是，允许我这样做的选项(formatSelectionCssClass)似乎已经从select2的V4.0中删除了
我已经尝试过使用templateResult与折叠：
templateResult: function (item) {
if (item.loading)
return item.text;
var element = $("#" + item._resultId);
switch (it
浏览 5提问于2015-10-16得票数 0
回答已采纳
1回答
我有两份名单。当我在第一个列表中选择一个值时，它会更新第二个列表中的选项。只有第二个列表是一个Select2。
我让它起作用了，但是Select2的搜索功能不起作用。
如果我检查DOM，我注意到Select2生成的选项没有文本。是因为它搜索不起作用吗？
这是我的JS代码：
$('.category').change(function(event) {
var measure = $(this).parents('.row').find('.measure');
// Modify placehol
浏览 0提问于2019-05-17得票数 1
回答已采纳
我使用的是select2，一切正常，但默认选择不起作用，
我使用的是select2 4.0.3js
我用的是initSelection，但是它的显示像这个截图，
var data = <?php echo $cat_json; ?>;
function templateResult(node) {
var $result = $('<span style="padding-left:' + (20 * node.level) + 'px;">' + node.text + '</span&g
浏览 3提问于2017-02-09得票数 3
回答已采纳
2回答
select2就像我想要的一样。当另一个字段被更改时，它加载所有远程数据并正确格式化其格式。我想在检索到的数据上添加搜索函数，即一旦数据被检索，用户就可以通过标题(result.title)搜索列表。
在下面的示例中，将检索数据，但没有过滤搜索项。重要的是，在用户必须搜索结果之前，首先加载所有远程数据。
如果我不能添加搜索功能，如何禁用搜索框？如果我设置为"minimumResultsForSearch：-1"，select2框仍然允许我搜索？
var $company2 = $(".company2");
$company2.sele
浏览 6提问于2017-11-21得票数 0
回答已采纳
我使用的是2 (4.0.0)。问题是，当我选择一个选项，然后选择另一个选项时，item.selected对这两个选项都是正确的--永远。我是否丢失了一些初始配置选项，或者这是一个bug？
function formatResult(item) {
console.log("item selected = ", item.selected);
return item.text;
}
$('select').select2({
templateResult: formatResult,
minimumResultsForSearch: Infi
浏览 5提问于2015-07-10得票数 2
8回答
我试图隐藏一些Select2选项，但当我这样做时：
<option style="display: none;">...</option>
Select2会忽略它，这与我禁用某个选项或将其设置为“只读”时不同。
有什么想法吗？
浏览 18提问于2014-03-03得票数 8
1回答
我正在Select2 4.0和Rails 4.2.7.1中开发一个多个选择。代码在数据库中保存了正确的值，但我注意到了一个问题:在验证失败后，它会丢失所有的值选择。如何初始化页面重新加载后先前选择的所有值？谢谢。
这是当前的select2声明：
$(select_report).select2({
ajax: {
url: '/vaccination_plans/index_json',
dataType: 'json',
data: function (params) {
return {
q: params.term
};
},
processResul
浏览 0提问于2016-11-22得票数 0
回答已采纳
1回答
我使用的是select2 4.0.3
我有三个选择..我们称它们为1、2和3。Select 2取决于select 1上选择的值。Select 3取决于select 2上选择的值
所有这些选择都在由jquery步骤插件创建的向导中
我使用templateResult和templateSelection选项来格式化ajax结果
我写了以下代码：
$("#1").select2({
placeholder: '<spring:message code="wzricper.step3.TipoPermesso" />',
a
浏览 1提问于2017-08-02得票数 3
参考，加载远程数据时会显示文字"Searching“。但是，我不知道为什么在我的例子中会显示“未定义”。
这是css文件。
<div class="col-sm-9">
<select class="js-data-example-ajax form-control" style="width:100%;">
<option value="select2/select2" selected="selected">select2/select2</opti
浏览 0提问于2015-01-12得票数 6
我正在开发我的客户Gari.PK的一个汽车项目。他想让我改变下拉菜单，但我被一个问题卡住了。这是我的下拉列表的HTML代码。
<select class="round-10 js-example-basic-single" name="c_version" id="c_version">
<option value="">- Any Version -</option>
<option value="XLi VVTi">XLi VVTi <br>
浏览 1提问于2017-01-03得票数 0
function formatCountry(country) {
if (!country.id) {
return country.text;
}
var $country = $(
'<span class="flag-icon flag-icon-' + country.id.toLowerCase() + ' flag-icon-squared"></span>' +
'<span class="flag-text&#
浏览 4提问于2018-01-26得票数 0
回答已采纳
以下是我的HTML代码：
<select class="select2">
<option value="1" style="background-color: #ff0000;">OPTION 1</option>
<option value="2" style="background-color: #ffffff;">OPTION 2</option>
....
<option value="144"
浏览 2提问于2020-05-05得票数 2
回答已采纳
我使用jquery中的select2插件，通过ajax加载获取数据。在设置响应时，我希望将属性添加到下拉列表的li-elements中。我已经尝试过在"templateResult“中调用函数，但在那里我只能返回<li></li>标记中的vakue
我的javascript：
var autocomplete = function () {
$("body").find("#myDropDown").select2({
language: "es",
浏览 8提问于2017-01-26得票数 0
6回答
如何在select2中添加图标？
、、、、
I使用select2版本4
我试着这样做：
$("select02").select2({
placeholder: "<i class='fa fa-sitemap'></i>Branch name",
});
但是，它不起作用
演示是这样的：
有什么办法可以解决我的问题吗？
浏览 4提问于2016-05-23得票数 8
4回答
我使用select2填充HTML，我希望select2选项具有与html选择控制选项相同的背景色，在select2JS中是否有允许我们这样做的选项，或者我必须手动完成它？
下面是示例代码
$('.selectcls').select2({
minimumResultsForSearch: -1,
placeholder: "Nothing selected",
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css"
浏览 4提问于2017-08-23得票数 2
1回答
我使用的是来自远程服务器的带有ajax自动完成的select2 jQuery插件。但是用户输入会被附加到下拉列表中。有人能帮助我在select2自动完成下拉列表中不显示用户输入吗？
这是我的js代码
$('#id_available_users').select2({
placeholder: "Select an Existing User",
allowClear: true,
minimumInputLength: 3,
tags: [],
浏览 5提问于2020-05-22得票数 1
回答已采纳
我试图使用带有Yii2搜索模型的2(加载远程数据)插件。现在，我的控制器返回从搜索模型创建的$dataProvider。但是，它显然不是select2可以用来创建下拉列表的格式。
我需要对$dataProvider或select2做些什么才能让两者一起工作呢？
在我看来，有两种选择：
从cat_name中提取“$dataProvider”，并将其放在select2可以使用的格式中。
教select2如何阅读$dataProvider。
我不知道如何实现2，我怀疑这会使“标记”功能难以实现，因此我倾向于使用1。
任何帮助都将不胜感激。
这是我的密码：
控制器侧
public fu
浏览 3提问于2015-09-16得票数 1
回答已采纳
我使用的是Select2 (V4.00)，并使用ajax方法加载远程数据。
我需要检索所选选项的标题，但在select2:select event data is undifined中
我的代码：
$(".js-data-action-terms").select2({
ajax: {
url: ajaxurl + "?action=terms",
dataType: 'json',
data: function (params) {
return {
浏览 1提问于2015-10-19得票数 4
我是一个新的I。我有这个bug，我不知道如何解决这个问题。 Bug是非常简单的templateSelection调用两次。这是我的代码。 如果我在select2中提交了一些东西，templateSelection会调用两次。 echo Select2::widget([
'name' => 'blogId',
'options' => ['placeholder' => 'Search for
浏览 79提问于2020-03-19得票数 0
回答已采纳
1回答
我已经通过select2配置了我的选择，一切都很好。
我使用templateResult和formatState方法将图标添加到下拉选项中。
$(".js-country-list").select2({
templateResult: formatState
});
但是，这不会将任何内容更改为选定的值(请参见下面的图像)。
如何确保选定的值(在我的例子中，EUR)将与选项:欧元(EUR)完全相同？
谢谢。
浏览 9提问于2021-12-13得票数 2
回答已采纳
如何将其转换为Yii2 select2 kartik小部件？我认为来自select2 kartik小部件的"data“属性只允许id ->文本。有什么方法可以用小部件完成这个任务吗？
var data = [{
id: 0,
text: 'enhancement',
html: '<div style="color:green">enhancement</div>'
}, {
id: 1,
text: 'bug',
html: '<div
浏览 4提问于2017-11-18得票数 0
回答已采纳
3回答
我在_form.php有一个textInput。然后，我将其更改为select2。但在我更改它之后，验证就不起作用了。有什么问题吗？如何在select2中进行验证，使其不能为空？代码如下：
_form.php
<?php
$formatJs = <<< 'JS'
var formatPenerima = function (penerima) {
if (penerima.loading) {
return penerima.text;
}
浏览 0提问于2016-05-12得票数 1
1回答
<?=
$form->field($model, 'contributors')->widget(Select2::classname(), [
'initValueText' => '',
'options' => ['placeholder' => 'Search for a Contributor ...'],
'pluginOptions' => [
'allowClear'
浏览 1提问于2018-02-01得票数 1
我正在尝试使用带有模板的select2 ajax调用。我可以很好地使用ajax，但它没有使用我的模板函数。
ajax数据是：
[
{"name":"First thing","otherData":"asdfg"},
{"name":"Second thing","otherData":"qqerr"},
{"name":"third thing","otherData":"yerty"
浏览 0提问于2015-03-19得票数 15
回答已采纳
我们通过在Action类的列表中添加list.The值来填充下拉列表中的选项。当option等于一个特定值时，我们想要隐藏它。 代码如下： if (stuval.substring(0, 7) == "<option") {
$('#stuclass option:not(:first)').remove();
$('#stuclass').find('option').end().append($(stuval));
} 当value为'Not
浏览 144提问于2021-02-09得票数 0
回答已采纳
1回答
下午，
在一个网站上，我已经更新了许多使用select2 v.3.5.2的元素到新的V4.0(其中一些元素在所有页面上的网站标题上)。
不幸的是，在网站的某些页面上使用的是X可编辑的jquery插件，而且该插件不能很好地使用select2的v4.0(请阅读:根本不播放)
我的问题是：可以在某些页面上使用select2的两个版本吗？
，如果是的话，怎么做？，因为$(...).select2();对加载哪个版本的select2视而不见.
示例代码：
$("#search_species").select2({
minimumInputLength: 1,
浏览 0提问于2015-11-27得票数 2
回答已采纳
2回答
我在我的页面上有以下选择：
<select><option value="1" selected="selected">Caption</option></select>
我调用select2 (v4.0) init：
city.select2({
ajax: {
url: <...>,
data: <...>,
processResults: <...>,
cache: true
},
es
浏览 1提问于2015-05-20得票数 2
4回答
我试图在Select2 v4下拉项目中显示方框图标。但是下拉列表显示的是html，而不是生成实际的图标。此方法适用于select2 V3，但似乎不适用于v4。任何帮助都是非常感谢的。谢谢
HTML
<div class="select2-wrapper">
<select class="input icons_select2">
<option value="fa-dribbble" data-icon="fa-dribbble">Dribbble</option&
浏览 2提问于2017-02-01得票数 3
回答已采纳
1回答
在@Rory的帮助下，McCrossan成功地创建了这样一个脚本来对select字段中的值进行排序。然而，仍然存在一个问题--支持波兰字符。是否也有可能被考虑在内？
代码：
var dataUser = [{
"id": "5",
"text": "BTest"
}, {
"id": "2",
"text": "ATest"
}, {
"id": "8",
"text":
浏览 3提问于2016-01-26得票数 3
回答已采纳
3回答
我有一个使用JS的Vue应用程序。除其他外，我需要使用一些Select2来动态加载值。我为我的Select2做了一个Vue组件，除了一个问题外，它工作得很好。我使用Ajax来获取Select2的动态选项，但是当我的Select2被挂载时，它不会为Ajax加载一个值。这是我的密码：
<template>
<table class="table">
<thead>
<tr>
<th>Substance</th>
<th
浏览 3提问于2020-05-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
