1回答
我在bootstrap v4下拉列表中有一个select2。当下拉菜单被触发时，我将选项加载到select2中。
select2包含一些具有长名称的项目，如果打开select2，我希望显示完整的宽度，即使它比下拉列表更宽。
我在select2:opening和select2:open事件处理程序中尝试过select2({width: 'resolve'})和select2({width: '200%'})，但它们抛出了异常。如果我用宽度:200%初始化select2，如果没有打开它，它就太大了。
这个是可能的吗？有什么想法吗？谢谢。
浏览 5提问于2016-05-09得票数 0
我已经集成了select2与我的活动管理员。但它不能正常工作。它只显示下拉列表，而不显示搜索选项。
我关注了以下链接：()
使用的Ruby版本: ruby-2.6.3 x86_64 Rails版本: Rails 5.0.7.2
这是我的app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require_tree .
//= require select2
//= require select2_locale_pt-BR
$( &
浏览 33提问于2019-07-05得票数 0
1回答
我遇到了一个问题，select2下拉菜单在打开时仍然保持焦点。
基本上，当您使用select2单击下拉菜单时，会显示一个特殊的select2下拉菜单，顶部有一个文本输入，这样您就可以开始键入并缩小选择选项的范围。当select2下拉菜单打开时，焦点不在搜索输入中。它仍然在原始的select html元素上。
这是一个在CodePen上工作的select2下拉菜单，只是作为一个例子。我不能复制我在CodePen中遇到的问题，所以它让我觉得在我的网站上有一些冲突。但我不知道是什么，我似乎也不能缩小范围。
see codepen for sample working code
我可以看到焦点在打开
浏览 1提问于2018-04-11得票数 2
8回答
在我的select2页面中，ASP.NET下拉列表的宽度有问题。当我尝试使用设备屏幕的Chrome仿真器查看页面时，select2比包含的div大，并且在右边它会离开屏幕。通过代码检查，我看到它在<span class="select2 select2-container select2-container--bootstrap select2-container--below">元素中自动添加了一个样式属性<span class="select2 select2-container select2-container--bootstrap selec
浏览 4提问于2017-07-24得票数 38
回答已采纳
3回答
我使用的是select2下拉菜单，并且想在每个选项上设置不同的颜色。
示例：
<select class="select2" name="fruit">
<option class="red-option">Apple</option>
<option class="green-option">Kiwi</option>
<option class="blue-option">Grape</option>
</se
浏览 1提问于2018-04-13得票数 6
回答已采纳
所以我有这段代码，它将下拉列表中的项目添加到文本区，因为下拉列表包含多个检查表，我希望有人能告诉我如何修改代码，以便创建一个可搜索的下拉列表。甚至我看了这个答案Searchable select option并添加了select2，但什么也没有发生 <head>
<title>Jquery multiple select with checkboxes using bootstrap-multiselect.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selec
浏览 19提问于2019-12-07得票数 0
回答已采纳
我在我的网站上使用自定义主题，它需要jquery.min.js，所以下拉菜单可以工作，但是当我使用select2时，jquery文件似乎被调用了两次。
这是细节。
当我在我的main.php上调用jquery时，我的下拉菜单可以工作，但是我的select2不能工作，并且得到了TypeError: jQuery(...).select2 is not a function错误
但是，当我不在main.php上调用jquery时，下拉菜单就不能工作，并且会出现这样的错误。
错误:引导程序的JavaScript需要jQuery bootstrap.min.js:6:37 ReferenceE
浏览 2提问于2016-08-09得票数 0
5回答
我在一个站点上使用bootstrap，并在加载时使用以下代码将我的选择框转换为下拉框
$("select").select2();
但是，当加载任何带有select下拉列表的页面时，会有一个短暂的延迟，在select2替换页面被引入之前，可以看到原始页面。这是相当不和谐的，因为我的页面上的表单元素到处移动。
有没有一种方法可以在我的后端(ASP )生成ASP，并将其写到页面上，这样select2插件仍然可以正确地连接所有的行为？
浏览 4提问于2015-04-24得票数 8
1回答
我想知道如何让我的Select2下拉菜单在Bootstrap弹出窗口中工作。我知道问题是popover内容是在popover-event-click启动后加载的，所以Select2的JS代码无法工作。我只是不知道该怎么解决它。
示例：
尝试在名为"Aaaah!“的第四个问题上按"submit”。你就可以看到弹出画面了。然后尝试按下"Alabama"-dropdown (这是Select2下拉菜单)，它不会工作(因为JS不会启动，因为弹出内容是在DOM之后加载的)。
有人知道怎么让它工作吗？
浏览 4提问于2014-03-03得票数 1
我正在尝试使用require.js来使用，用于带有悬停的下拉菜单。但是我一直收到一个错误：" error : Script error“。我需要做些什么才能在require.js中使用它？
编辑：
为了帮助@jakee关注这个问题，我做了以下配置：
requirejs.config({
paths: {
"myBootstrap": _myBootstrappingPath + "js/bootstrap",
"myControllers" : _myBootstrappingPath + "
浏览 0提问于2013-06-26得票数 0
回答已采纳
1回答
我的select2盒子出了点问题。由于某些原因，下拉选项显示时添加了左填充，导致它们出现在模式的旁边。
我在其他正常工作的页面上使用了完全相同的代码。由于某种原因，添加了一个左填充，我不知道为什么。
我发起.select2的方式如下：
$(document).ready ->
$('#master_sku_id').select2({theme: 'bootstrap', dropdownParent: $(".modal-body")})
return
浏览 0提问于2016-09-08得票数 0
不是单击select2表单输入，而是显示带有文本框的下拉菜单：
如何显示textbox替换占位符文本的位置，如：
_form.html.erb
<%= f.grouped_collection_select(:name, @collection, :last, :first, :to_s, :to_s, include_blank: true ) %>
<script>
$('#lifetime_name').select2({
placeholder: "Enter Challenge",
th
浏览 2提问于2016-01-02得票数 1
回答已采纳
2回答
添加引导5搜索栏下拉列表
、、、、
我在这里有点新，但我想知道是否有人可以帮助添加一个下拉菜单与搜索栏。例如，我希望用户能够从特定食物的列表中选择特定的项目，或者搜索它们，但是我还没有找到引导5中的教程来做到这一点。我阅读了这些文档，但它并没有给我任何具体的方法来实现带有下拉列表的搜索栏。
据我所知，我可以使用javascript手动添加搜索栏的代码，并尝试将其与引导下拉列表链接起来，但我对JavaScript并不十分熟悉，我想知道引导程序是否有办法做到这一点，这样布局就不会变得一团糟。
我遵循了一个教程，这是在引导4，但它基本上有我的想法，但由于jQuery是从引导5删除，它不会在我目前的网站。这是代码：
$('.
浏览 5提问于2021-10-11得票数 1
我正在尝试使用select2插件的新版本(4.0.2.rc1)，但allowClear操作有问题。
$('select').select2({
theme: 'bootstrap',
placeholder: '..',
allowClear: true
});
使用版本3.5.2，“清除”操作运行良好，但使用此版本，当我单击到x来清理选项时，将清除选项，甚至打开下拉菜单。
我怎样才能解决这个问题？谢谢
浏览 1提问于2016-02-23得票数 0
回答已采纳
2回答
我会为我的select2下拉列表定制搜索。在搜索字段中写入3个字符之后，我将使用这些搜索参数执行服务调用。
当我选择下拉列表时，它会显示错误TypeError (无法读取属性'machineService‘of null)，该服务在调用getSelectOptions-方法之前被初始化。
HTML:
<select2 id="inputMachine"
[data]="machinesModel.data"
[options]="machinesModel.options"
[w
浏览 0提问于2018-06-12得票数 1
回答已采纳
我在一个页面中使用了bootstrap、jquery ui、select2等。这导致select2下拉列表的-5px偏移量相对于select2的显示值(在选择后)向左。 我尝试使用以下代码向右移动下拉列表： var select2_pos = $("html body span.select2-container.select2-container--default.select2-container--open").position();
select2_pos.left = select2_pos.left + 5;
$("html body s
浏览 21提问于2019-04-17得票数 0
回答已采纳
我正在使用select2.full.js
我没有使用任何require.js来帮助我引入模块，我基本上是使用我在v3.5中学到的所有知识
我已经尝试了无数个小时，对此一无所知，但我不知道如何让ajax级联下拉。
示例:加载页面时，会出现第一个使用ajax自动拉取数据的select2下拉菜单(无需输入任何内容)。数据在从服务器加载的页面上)，则选择默认值。由于选择了默认值，第二个select2下拉列表将使用该值进行ajax调用，以填充自己列表。现在，当我在第一个select2下拉列表中选择另一个值时，第二个select2下拉列表将使用新数据集反映这些更改。
我想出的是一个可以在页面加载时填充的3
浏览 1提问于2015-09-04得票数 1
我不能点击搜索输入下拉列表。首先，我已经在googled上搜索过了，这对于select2和bootstrap3或bootstrap4来说是一个常见的问题，但是对于引导5，它有点不同(我尝试在引导4上删除z-索引及其工作)，我已经尝试了一些解决方案，比如z索引、$.fn.modal.Constructor.prototype.enforceFocus = function() {};、$('#mySelect2').select2({ dropdownParent: $('#myModal') });和一些css，但仍然无法工作。
也许我错过了什么我不确定，就像4
浏览 2提问于2022-06-13得票数 0
回答已采纳
我有一个复选框，当选中该复选框时，将一个值赋值给下拉复选框。问题是，select下拉列表是用Select2设计的，而将值赋值给select不起作用。
我已经寻找了一段时间的解决方案，但没有得到一个明确的解决方案和解释。我希望你能帮我解决这个问题。提前谢谢你的建议。
以下是它如何运行“没有选择2”的工作示例。。
下面是“不工作”示例的“with Select2”版本的片段和Select2：
$(".js-example-basic-single").select2();
$(function() {
$("#geStd").click(function
浏览 12提问于2017-10-24得票数 0
回答已采纳
1回答
当我更改另一个select2下拉列表的值时，我尝试以编程方式更改select2下拉列表中的数据集。
我的问题是奇怪的，因为它似乎改变了徽章的价值，但没有选择本身。您可以在徽章中看到2和3，但是一个数据集中的文本的值是完全不同的，但是它不会改变选项。
这是一把小提琴，用来说明我的意思。
这是formatText函数：
function formatText (icon) {
if(icon.badge == undefined){
return $('<span>' + icon.text + '</span>');
}
浏览 3提问于2020-10-19得票数 0
回答已采纳
我正在使用easyadmin包创建Symfony4.2站点的后端。在为我的实体创建的新/编辑表单中，它创建一个下拉列表以供选择。然而，在chrome和firefox中，这些下拉列表并不像预期的那样。当我点击它们时，它会显示这些选项，但是如果我选择一个选项或从下拉菜单中单击，它就不会关闭。它在Safari和Edge上运行得很好。
这是easyadmin.yaml
easy_admin:
#Global Settings
site_name: 'Physics Quiz SIte'
design:
assets:
f
浏览 1提问于2019-05-15得票数 2
回答已采纳
4回答
我遇到了一个有趣的问题，我似乎无法用和来解决这个问题。
单击某个事件时，我试图使用数据库中的内容预选Select2下拉列表：
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
$("#view_event").modal(); //launches bootstrap modal
$("#client_list_edit").select2();
$("
浏览 7提问于2013-04-24得票数 7
我正在尝试在我的select2 MVC视图中的下拉列表中应用jQuery函数，但是我被困住了，任何人都可以在这方面帮助我--提前谢谢。
这是我的看法
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/s
浏览 2提问于2021-06-19得票数 1
回答已采纳
我使用的是bootstrap datatable和yadcf filter插件。过滤器对于普通的表工作得很好，但是如果我有一个固定的列，如果该列有select2下拉列表，那么它就不能正确呈现。第一件事是，下拉列表是隐藏的，值也不会被填充。
先谢谢你，尤德希尔
浏览 0提问于2017-09-22得票数 0
我想带来一个使用select2 js搜索用户的下拉列表，其中下拉列表中的值必须根据所选公司填充，这是此下拉列表上方的一个下拉列表。
我正在使用带有MYSQLI的XAMPP版本5。
<?php
include 'db.php';
?>
<html>
<head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css' rel='stylesheet' type='text/c
浏览 0提问于2019-09-13得票数 0
在我的application.js中，我已经初始化了.select2选择：
$(document).ready(function() {
$(".select2").select2({
theme: "bootstrap",
width: '100%',
allowClear: true
});
});
在我的应用程序的另一部分中，我有一个与remote: true的链接，它用.select2呈现一个带有下拉列表的新表单。
<%= link_to 'new form' new_feed_it
浏览 0提问于2017-10-18得票数 3
回答已采纳
2回答
我正试图以编程的方式对某些select2选项的背景色进行样式设计。因为某种原因，它似乎不起作用。我一点也不觉得背景颜色是红色的。实际上，我要做的是将select2呈现的内容设置为安莉的背景色，并且是formatText()函数中span标记的父函数。
编辑：
你在这里看到的这些选项是黄色的，我希望整行，而不仅仅是文本是黄色的。
我还想在我的家庭下拉样式的个别行，以符合他们将如何在我的产品下拉式颜色。
我有两部分代码，我认为应该这样做。这是Fiddle -
const productsConfig = {
width: "100%",
theme: '
浏览 3提问于2020-10-27得票数 3
回答已采纳
1回答
我使用select2创建了一个下拉列表(v4.0.13，我不能更改它)，在表单上使用AJAX请求，用户可以在其中搜索东西。页面是用Thymeleaf构建的，当重新加载视图时，下拉值就会丢失。
在您处理时，根据文档本身的建议，我编写了以下代码：
let selectedOption = $('#select2-id');
$.ajax({
type: 'GET',
dataType: 'json',
url: baseAjaxUrl + '/api_endpoint?q=' + myVar,
}).then(fun
浏览 43提问于2022-06-21得票数 0
回答已采纳
1回答
我在尝试从Bootstrap向中插入时遇到问题。标记如下所示：
<ul class="dropdown-menu dropdown-select-box">
<li>
Choose categories:
<select id="choose-category" multiple="">
<option></option>
<option></option>
浏览 0提问于2013-01-16得票数 0
2回答
我有一个用母版页构建的webforms应用程序。就在最近，我一直在尝试在其中一个表单上添加一个select2下拉列表。 当我在一个独立的页面中运行代码时，一切都很好。但是当从母版页继承时，它并不能很好地工作--请看图片的例子。 当我在Chrome中按F12时，没有jQuery错误。 在母版页的头部，我有以下内容，按如下顺序排列： <!-- Bootstrap core JavaScript-->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="
浏览 17提问于2020-01-11得票数 0
回答已采纳
我有多个select2下拉菜单。每当select2下拉菜单打开时，我都想将类添加到我的div中。
为此，我使用select2的open和close事件。当您打开select2下拉菜单并将其关闭时，下面的代码运行良好。但是如果你打开了一个select2下拉列表并点击了另一个select2下拉列表，它就不起作用了。在这种情况下，它会检测到关闭事件。
$('select').on('select2:open', function (e) {
$('.a').addClass("header-index");
});
$('
浏览 4提问于2019-07-31得票数 1
我找不到Bootstrap的可滚动、多选列表组件；有人知道吗？
Select2组件很棒，但我希望列表首先是展开的，而不是下拉列表。
如果它可以方便地与文本输入组件一起进行搜索/过滤，那就更好了。
感谢你的任何有用的提示！
浏览 0提问于2013-05-29得票数 6
1回答
具有相同值的下拉集-验证
、、、
我有一个由四个select下拉列表(bootstrap selectpicker)组成的集合，其值为1到10，具有不同的ids和名称(例如.id="select1",id="select2")。
如何验证这个下拉列表，这样用户就不能选择相同的值。如果用户在第一个下拉列表中选择了一个，那么我不想让他在剩下的下拉列表中选择一个。
$("select").change(function() { var value = $(this).val();
//alert(value); $("select").not(this).find(&#
浏览 0提问于2016-03-08得票数 0
回答已采纳
我在使用jquery select2库
http://ivaynberg.github.io/select2/
我面临的问题是，我的表单中有多个下拉列表，如果我通过Ajax提交表单，除了select2下拉列表之外，所有的feilds都会得到重置/空。
我用这个做重置
$("#block-validate")[0].reset();
而且它工作非常好，并且重置/清空表单中除select2以外的所有字段。
我知道有一种方法可以使用以下方法来清除select2的功能
$("#e8").select2("val", "");
但它只会重置
浏览 10提问于2014-08-25得票数 2
回答已采纳
我想结合使用select2.js和twitter bootstrap 3。到目前为止一切都很好，除了下拉容器和选择容器本身的宽度不同之外。
通过调整窗口的大小，这种现象会出现和消失。
这是一张显示问题的图片
这里是jsfiddle，您可以在其中尝试调整大小。(使用IE 11和FF 26进行测试)
还有下面的代码：
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet"
浏览 0提问于2014-02-01得票数 6
我的UI有一些从Bootstrap创建的下拉列表，我用它来包含一些表单元素。我正在防止下拉列表与我在这里找到的解决方案关闭，这几乎是完美的：
剩下的问题是我使用Select2多选和删除选项的具体实例。删除的行为似乎遵循一个不同的事件链，因为它关闭下拉列表。我的假设是，事件正在传播到父元素，但我似乎无法确定哪一个。
这里有一个来说明这个问题。选择一个选项，然后删除它以查看发生了什么。下面是当包含jsfiddle时所需的代码。当然，它从我的实际代码中减少了，但至少代表了这个问题。
$('body').on('click', '.dropdown .cycle
浏览 0提问于2016-02-04得票数 4
回答已采纳
我试图在输入组中使用select2，但是按钮总是在select2控件之后的下一行。如果删除select2类，它将按预期的方式工作。如果select2引导是基于引导主题的，为什么它不遵守标准的引导输入组类？我遗漏了什么，以确保它们都在同一条线上，并显示为一个组？
没有select2类(以及我希望它的外观)
用Select2
使用Select2并添加style=“宽度:75%”(底部关闭)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
浏览 4提问于2019-06-21得票数 4
回答已采纳
我正在使用bootstrap的select2有一个搜索下拉菜单，但问题是验证不起作用。以前它可以在没有select2的情况下工作，但现在它不能工作，消息总是显示出来。
<div class="form-group" ng-class="{ 'has-error' : addEmployee.formAdd.pos.$invalid && !addEmployee.formAdd.pos.$pristine }">
<label>Position</label>
<selec
浏览 2提问于2016-11-08得票数 0
我正在使用带有Laravel刀片引擎的select2，我将它用于，它的工作正常(从远程获取数据)，但它看起来不像select2盒子。我还为生成的select2附加了图像。
我的CSS文件包含在以下部分中
{{--Bootstrap--}}
{{ HTML::style('css/bootstrap.css') }}
{{ HTML::style('css/bootstrap.min.css') }}
{{ HTML::style('css/plugin/font-awesome.min.css') }}
{{--select2-
浏览 8提问于2016-01-03得票数 0
在实现Select2远程搜索时，我一直试图显示默认的下拉列表选项。我已经在网上完成了各种实现，但到目前为止还未能实现。
我的HTML代码
<select id="search_states" style="width: 100%">
<option value="PA">Pennsylvania</option>
<option value="VA">Virginia</option>
</select>
我的JS代码
/*Search Sta
浏览 7提问于2022-07-29得票数 0
我对引导模式上的链式下拉有问题，
这是我的密码：
function edit(id) {
var id = id;
$('#edit').prop('hidden', true);
$('#modal_form').prop('hidden', false);
/* $.ajax ({
type: 'POST',
data: {id : id},
url: 'http://localhost/master',
succes
浏览 0提问于2020-04-15得票数 0
回答已采纳
1回答
我已经在整个应用程序中使用了bootstrap-select。现在我应该用相同样式的select2替换bootstrap-select。更改js部件的最快、最有效的方法是什么？
例如：
在bootstrap-select中有方法和选项，如selectpicker('refresh'),selectpicker('show'),selectpicker('close')等，而在select2中，方法是open,close等。即使我用不太相似的bootstrap-select方法替换那些select2方法，我也得不到相同的结果和奇怪的行为。与bo
浏览 1提问于2017-05-08得票数 2
如果没有select2，js会下拉下拉列表下面的消息，但是在使用select2之后，会出现错误消息。
我可以在select2 js下拉列表下面或在任何特定位置显示错误消息。
工作代码会有帮助的！
浏览 3提问于2017-09-08得票数 3
1回答
我想结合使用Select2和Vue.js来显示一些可选选项，但是无论我如何实现它，总是会出现错误： Uncaught ReferenceError: select2 is not defined
at Object.select2 (external "select2":1)
at __webpack_require__ (bootstrap:766)
at fn (bootstrap:129)
at Module../src/jquery.js (jquery.js:3)
at __webpack_require__ (bootstrap:766)
at fn (boot
浏览 10提问于2019-02-01得票数 0
我正在使用select2 jquery插件。
我使用的是open事件
var select2 = $('select').select2();
select2.on("select2:open", () => {
// I want to do some code here with $('.select2-results__option')
//$('.select2-results__option').size() is not equal to actual elements
});
当我们单击下拉列表时
浏览 1提问于2016-08-03得票数 2
当我单击id为"#clickme"的特定div时，我想切换(打开/关闭) select2选择框的下拉菜单 下面是我用来打开下拉选项菜单的代码： $(document).ready(function() {
$("#clickme").click(function(){
$("#postitemlocation").select2("open");
});
}); 但此操作仅打开select2下拉菜单。我试过了 $("#postitemlocation").select2("toggle");
浏览 8提问于2020-01-20得票数 0
回答已采纳
1回答
我正在尝试将select2请求/导入到项目中，但失败了。
尝试这两个总是得到$('#state').select2不是一个函数。当我在标准<script>标记中包含select2时，一切都正常。
require('./bootstrap');
import 'select2';
$('#state').select2({
minimumResultsForSearch: -1
});
和
require('./bootstrap');
window.select2 = require('
浏览 6提问于2018-07-22得票数 3
我添加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
回答已采纳
我正试着用Bootstrap来设计我的表格。我有一个django自动完成灯控件，它使用Select2并在后端查询数据库。
我试过使用
然而，这破坏了远程数据链接，所以当我搜索时，我所得到的只是用于下拉列表的引导占位符。
以下是相关代码：
CSS / JS声明
<link href="/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="
浏览 0提问于2017-03-06得票数 4
我正在尝试将select2下拉列表放置在我的弹出窗口中--当我第一次打开弹出窗口时，select2下拉列表通常是呈现的，但是如果我关闭它并再次打开它，它会呈现两个select2下拉列表，其中一个是不可点击的：
我已经尝试过来自的解决方案和来自的解决方案，但是它们都没有工作。我还读到过select2在Bootstrap模式下不能正常工作，并且尝试用dropdownParent属性呈现它--也不起作用。
My：
<div class="actions-row mb-5">
<button type="button" class=&#
浏览 6提问于2020-05-21得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
