select2 formatState不支持bootstrap 4主题
select2是一个基于jQuery的下拉选择框插件，用于增强用户在选择输入框中的体验。formatState是select2插件中的一个选项，用于自定义下拉选项的显示格式。
在select2中，formatState选项可以接受一个函数作为参数，用于自定义下拉选项的显示格式。该函数接受两个参数：state和container。state参数表示当前选项的数据，包含text和id等属性；container参数表示当前选项的DOM容器。
由于select2是基于jQuery的插件，所以在使用formatState选项时，需要先引入jQuery库和select2插件的相关文件。
在Bootstrap 4主题中，由于样式的改变，formatState选项需要进行相应的调整。可以通过自定义CSS样式来修改下拉选项的显示格式，以适配Bootstrap 4主题。
以下是一个示例代码，演示如何使用formatState选项来自定义下拉选项的显示格式：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css">
</head>
<body>
<select id="mySelect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('#mySelect').select2({
templateResult: formatState
});
});
function formatState(state) {
if (!state.id) {
return state.text;
}
var $state = $(
'<span><i class="fa fa-circle"></i> ' + state.text + '</span>'
);
return $state;
};
</script>
</body>
</html>在上述示例中，我们引入了Bootstrap 4和select2的相关文件，并创建了一个下拉选择框。通过调用select2函数，并传入templateResult选项，将formatState函数作为参数传入，实现自定义下拉选项的显示格式。
在formatState函数中，我们根据state参数的内容，创建了一个带有图标的选项，并返回该选项的DOM元素。
这样，就可以在Bootstrap 4主题下使用select2插件，并自定义下拉选项的显示格式了。
腾讯云相关产品中，没有直接对应select2的产品，但可以使用腾讯云的云函数（SCF）和云开发（TCB）等产品来实现类似的功能。具体可参考腾讯云的官方文档：
- 腾讯云函数（SCF）：https://cloud.tencent.com/product/scf
- 云开发（TCB）：https://cloud.tencent.com/product/tcb
相关·内容
1回答
如何将图标附加到列表中？
list、append、font-awesome、jquery-select2
我想在我的select2选项字段中添加一个图标，这是一个li元素。
$(".select2").select2({
templateResult: function (data, container) {
if (data.element) {
$(container).addClass($(data.element).attr("class"));
}
return data.text;
}
});
$( ".yellow" ).append('<i class="fa
浏览 4提问于2017-06-14得票数 0
回答已采纳
1回答
如何在我的select2选择框中显示我选择的图标？
icons、jquery-select2
当我选择一个图标时，只有文本显示在我的选择框中，而不是图标：
$(document).ready(function(){
$("#social").select2({
templateResult: formatState
});
});
function formatState (state) {
if (!state.id) { return state.text; }
var $state = $(
'<span ><i class="fa fa-'+ state.id +'"
浏览 8提问于2017-06-16得票数 1
回答已采纳
2回答
select2在选定选项上绘制图像和文本
javascript、html、jquery-select2
我有一个select2，上面有一张挂着国旗的国家名单。若要显示select，请显示国旗和国家，但选定的文本不显示国旗。
这是代码：
$("#cmbIdioma").select2({
templateResult: function (idioma) {
var $span = $("<span><img src='https://www.free-country-flags.com/countries/"+idioma.id+"/1/tiny/" + idioma.id + ".png&#
浏览 1提问于2018-12-13得票数 5
回答已采纳
1回答
换行文本模式下的select2显示下拉图像和文本
jquery-select2、jquery-select2-4、ui-select2
我需要显示文本和图像在一个换行文本如下图所示 ? 选择后，它不显示图像，也没有包装(我希望图像和包装芯片都显示) 我已经尝试过 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link hre
浏览 39提问于2020-08-27得票数 0
回答已采纳
2回答
JQuerySelect2没有显示选定的值
javascript、jquery-select2
Select2插件没有显示选择的选项与templateFormat选项，谁知道如何修复它？
标记：
<select id="plans" style="width: 75%">
<option value="1" name="text1" price="$1" saving="text" selected="selected"></option>
<option value="2" name="text2" p
浏览 3提问于2016-01-20得票数 2
回答已采纳
1回答
select2 formatState不支持bootstrap 4主题
javascript、jquery、jquery-select2
我添加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
回答已采纳
1回答
使用突出显示方法和css选择器突出显示select2
javascript、jquery、css、jquery-ui、jquery-select2
我需要突出显示汽车和货车，以下功能将突出显示为非多个select2列表，我需要突出显示多个和非多个选择。
<!DOCTYPE html>
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
浏览 4提问于2020-09-26得票数 1
回答已采纳
1回答
如何从select2下拉列表中删除用户输入
javascript、jquery、jquery-select2、jquery-events
我使用的是来自远程服务器的带有ajax自动完成的select2 jQuery插件。但是用户输入会被附加到下拉列表中。有人能帮助我在select2自动完成下拉列表中不显示用户输入吗？
这是我的js代码
$('#id_available_users').select2({
placeholder: "Select an Existing User",
allowClear: true,
minimumInputLength: 3,
tags: [],
浏览 5提问于2020-05-22得票数 1
回答已采纳
1回答
在下拉式select2中显示图像
javascript、jquery-select2
我需要在select2中显示每个项目的图像 我已经尝试过 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/a
浏览 29提问于2020-08-27得票数 0
回答已采纳
1回答
事件后select2插件从选项列表中删除项
javascript、jquery、jquery-select2
我使用，我想从我的主选项列表中删除一个选项。当我点击这个代码的"x“按钮时，它只是从插件列表中删除。关闭/打开后，它会恢复。
有谁可以帮我？
HTML:
<select id="select">
<option value="Provider 1">Provider 1</option>
<option value="Provider 2">Provider 2</option>
<option value="Provider 3"
浏览 1提问于2017-12-14得票数 2
回答已采纳
3回答
获取select2搜索框值并将其追加到下拉列表中
jquery、jquery-select2
我想要获取搜索框文本，并将其附加到选择框的下拉列表中。我在这上面浪费了几个小时，但没有得到任何帮助。检查此处
<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.0/css/select2.css" rel="stylesheet"/>
浏览 0提问于2018-04-10得票数 1
1回答
无法使用DropDown列表中的HTML向Jquery Select2提供动态值
javascript、jquery、html、select2
我正在开发我的客户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
3回答
ToolTip不与Select2关闭
javascript、jquery、jquery-select2、jquery-ui-tooltip
我用的是 ToolTip和。我的代码如下。
$(".volunteer").on("click", function (event) {
function templateSelection(data_format) {
if (!data_format.id) { return data_format.text; }
var output = $('<span class="tooltip" title="' + data_format.title + &#
浏览 20提问于2022-02-09得票数 0
1回答
将动态创建的标签移到select2列表的底部
javascript、html、jquery、jquery-select2、jquery-select2-4
我正在使用select2中的create tag选项。然而，我想把“新类别”选项移到列表的底部，而不是第一个。 $(document).ready(function() {
$('.select2').select2({
escapeMarkup: function (markup) {
return markup;
},
templateResult: formatResult,
templateSelection: formatResult,
tags: true,
createTag:
浏览 8提问于2020-09-15得票数 1
回答已采纳
2回答
通过浏览select2选项显示产品图像
javascript、jquery、jquery-ui、jquery-select2
我有最新版本的select2产品集合，在浏览产品时，我希望根据select2光标动态地在单个img标记上显示产品的图像，这样我就可以确保我将要选择的产品是正确的产品，因为某些产品有相似的名称。
我的select2选项是基于选择的客户ny使用ajax进行更改的。
到目前为止，我尝试使用'on‘和select2 2:选择侦听器，但它不起作用。
这是我的进步：
html：
<select type="text" class="js-example-basic-single"
style="width: 100%" id="
浏览 9提问于2022-07-11得票数 0
回答已采纳
3回答
关于价值变化隐藏Select2 Optgroup
jquery、twitter-bootstrap、jquery-select2、jquery-select2-3
我在我的选择列表中有2个视光组，我试图在选择车辆时显示一个视景组，并隐藏其他视视组。
jQuery(document).ready(function() {
jQuery('select').each(function() {
jQuery(this).select2();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
&l
浏览 1提问于2015-04-03得票数 1
回答已采纳
1回答
突出显示将id选择器传递给函数的特定select2。
javascript、html、jquery、css、jquery-select2
我只需要突出#货车，而不是#汽车
有时候#vans可以是多个，有时也可以是非多重的。但是，我必须能够专门传递ID选择器来突出显示select。下面是答案中的代码
<!DOCTYPE html>
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jque
浏览 1提问于2020-09-26得票数 0
回答已采纳
1回答
我有三个下拉列表，我希望当我选择第一个下拉列表的值时，该值不应该出现在第二个下拉列表中
javascript、jquery-select2
<select class="js-example-templating" name="mem1">
<?php
$query = "select * from user";
$query_result = query($query);
while($row = fetch_array($query_result)) {
echo "<option value='{$ro
浏览 31提问于2019-03-20得票数 0
回答已采纳
3回答
如何向select2传递<option>属性？
jquery、html-select、jquery-select2
我使用的是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回答
在select2 3.2版中以相同顺序动态设置选项，无需排序
javascript、jquery、jquery-select2
我想根据我使用JS传递的值在select2下拉列表中动态设置相同的顺序，但它是根据dropdown automatically.Need Help对选项进行排序的。
下面是代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sel
浏览 12提问于2018-01-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
