错误: select2不能正确显示
对于这个问题，select2是一个流行的前端库，用于增强HTML select元素的功能和样式。它可以将普通的select元素转化为一个更友好和交互性更强的下拉选择框。
在使用select2时，如果它无法正确显示，可能有以下几个原因：
- 引入错误或版本不兼容：请确保正确引入select2的CSS和JS文件，并检查版本是否与你的代码兼容。
- 依赖项缺失：select2依赖于jQuery库，所以在使用之前需要确保已正确引入jQuery，并且版本与select2兼容。
- HTML结构错误：确保正确的HTML结构，select元素必须包含在一个合适的父级元素中，并正确设置相应的ID和class。
- 初始化问题：在使用select2之前，需要调用相应的初始化方法。通常是通过JavaScript代码来初始化，确保在DOM加载完毕后进行初始化。
以上是一些常见的问题和解决方法，如果仍然无法解决问题，可能需要进一步检查代码、调试或查阅select2官方文档以获取更详细的帮助。
关于腾讯云的相关产品和介绍链接，这里给出一个推荐产品-腾讯云CVM（云服务器）：CVM是腾讯云提供的弹性云服务器服务，支持按需购买、弹性调整配置、可靠稳定等特点。更多关于腾讯云CVM的信息可以参考腾讯云官方文档：腾讯云CVM产品介绍。
相关·内容
我有一些选择是Select2:s (使用插件select2)。我想要的是，当第一个select2被更改并且它是一个特定的选项时，它将显示另一个select2。首先，当加载页面时，所有隐藏的select2s都被jQuery的.toggle()隐藏。这是因为我使用引导程序，并且在..form group中有每个选择，而且我不想使用超出需要的类。因此，我使用以下方法：
$("#secondSelect").parents(".form-group").toggle();
然后使用以下代码显示下一个select2：
$("#firstSelect").o
浏览 3提问于2016-12-21得票数 2
回答已采纳
请参阅以下资料：
我有三页：
项目
任务
时间表
我希望使用ajax访问所有这些页面。我也做过，一切都很好。
但是我在项目页面和任务页面中使用了select2 jquery plugin。
当我试图使用ajax访问时，select2下拉列表没有正确加载。
它显示了一个错误：
$().select2 is not function.
我在头中添加了所有的js文件和css文件。
当我打开mysite/myprojects/projects.php时，它运行得很好，但是当我使用ajax从mysite/projects/front访问这个页面时，它就不能工作了。
请告诉我我能做什么
浏览 3提问于2014-06-20得票数 0
回答已采纳
我正在尝试将占位符图标插入select2输入字段。
在桌面上查看：
在移动设备上查看：
这是我使用unicode集成字体awesome的代码，将图标放在输入字段中。
jade (我在其中初始化select2的元素)
#tags.icon(type="text", name="tags", placeholder= " tags...")
和CSS
.select2-input, #searchPosts
font-family 'FontAwesome'
奇怪的
浏览 2提问于2014-07-04得票数 0
我希望能够使用箭头键到达我想要的select2选项，然后按tab键选择该选项，然后按选项卡到下一个元素。
我已经得到了向下箭头，可以用以下方式打开select2：
$(document).on('keydown', '.select2', function(e) {
if (e.originalEvent && e.which == 40) {
e.preventDefault();
$(this).siblings('select').select2('open');
}
});
我也可
浏览 2提问于2018-05-30得票数 2
回答已采纳
我正在使用select2插件。当用户忘记在submit上选择下拉值时，我希望向用户显示一个错误。但是，所发生的情况意味着它正确地显示了错误消息，但是在选择下拉值之后，错误消息将显示出来。
我的代码是，
<select name="books" ng-model="books" wb-select2 initial-select-key="authour" target-id="books" ng-options="book.authour for book in books track by book.id"
浏览 2提问于2018-01-31得票数 0
我在knockout.js中使用select 2
我想显示和隐藏控件是否选择了某一项。为此，我将可视属性绑定到模型上的isSelected可观测属性。
最初，select 2不可见。当项目变成isSelected = true时，框将显示并且是可见的。到目前为止一切都还好。
但是当isSelected变得错误时，我仍然可以看到控件。它不会消失。相同属性上的其他控件确实正确地工作、隐藏和显示，因此我确信该属性的设置是正确的。
在这里我的装订
<select class="input-xlarge"
data-bind="visible: isSel
浏览 0提问于2014-07-18得票数 2
回答已采纳
我有3个select2盒子，该页面要求其他两个被禁用时，其中一个被使用。我有以下代码，但是它不能工作。当页面加载时，所有的select2都会消失(它们被设置为HTML中的隐藏输入)：
$("#collection-search").change(function(){
if($(this).val())
$("#subject-search").select2("enable", false);
$("#special-search").sel
浏览 2提问于2013-09-19得票数 0
我使用Select2及其角度界面来实现如下的选择表单
<select ui-select2 ng-model='thing' data-placeholder='Options' id='form1>
<option value=''></Option>
<option value='1'>Option 1</Option>
<option value='2'>Option 2</Option>
在我的控制器中，
浏览 2提问于2013-06-08得票数 2
14回答
我有一个Select2自动完成输入(通过SonataAdmin构建)，但在我的一生中，我不知道如何以编程方式将其设置为一个已知的键/值对。
有大致显示了我所拥有的东西。我想知道的是，我可以将什么功能附加到按钮上，以便
Select2字段向用户显示文本“新值”，以及
当表单被发送到服务器时，Select2字段将提交一个值"1“。
我尝试过各种jQuery、Select2、data和val方法的组合，这些方法针对页面上的各种输入进行调用，但似乎没有什么效果。肯定有什么办法可以做到吗？
-编辑--
下面被接受的答案非常有用，有助于阐明正确的选择方法，并解释initSelect
浏览 5提问于2014-08-20得票数 35
回答已采纳
我的selec2下拉列表显示不正确。 代码如下： //此处包含HTML文件select2代码： <div>
<tr>
<td><b><bean:message key="label.student.display" />:</b>
<html:select property="stuCode" s
浏览 10提问于2020-12-25得票数 3
回答已采纳
它部分起作用了
我有两个选择，并想添加标题，以建议用户做什么和期望。我试过按照Flo的建议使用ko.computed，但我的逻辑仍然不正确。
这就是逻辑
select1 =发布者选择select2 =客户端选择
一张海报可以有许多客户。
1-如果视图模型的海报数组列表为空，我将'No Posters‘标题添加到select1。我还为select2添加了一个标题'No Clients‘并禁用了这两个选择
2-如果视图模型的海报数组列表只有一项，则显示当前项，而不显示标题
if the selected Poster object has no ClientSi
浏览 2提问于2012-04-09得票数 1
我不能在woocommerce的产品中添加属性。它显示了这个错误。
select2.js:934未明错误:当附加到元素时，Select2不允许使用‘ajax’选项。
浏览 4提问于2017-09-15得票数 1
回答已采纳
1回答
我在寻求指引让我朝着正确的方向前进。我的教授不知所措。对于select2多个字段，我的表单中的帖子有问题。我有一个“是”/“否”标志，它决定要显示哪一个选择2选择选项。
下面的javascript对于显示/隐藏非常有用。
$(document).ready(function () {
$('#option').change(function () {
$this = $(this)
$('.select_box').each(function () {
$select = $('se
浏览 0提问于2018-01-23得票数 0
回答已采纳
我有一个下拉选择器视图，需要通过url传递一个刷新页面的变量。
$data = ["line" => "Linea", "column"=>"Columnas", "bar"=>"Barras", "pie"=>"Pastel", "scatter" => "Puntos", "area" => "Area"];
$baseUrl= Url::current([&#
浏览 1提问于2018-04-19得票数 0
我使用Select2 ()让表单的一个输入字段(假设它的id是topics)处于标记模式，现有标记的列表(允许用户选择其中的一些标记，或者创建新的标记)由远程数据数组提供。
数组(list.json)是从我的服务器上正确获取的。它有id和text字段，因为Select2似乎需要这些字段。因此，它看起来像这样：
[ { id: 'tag1', text: 'tag1' }, { id: 'tag2', text: 'tag2' }, { id: 'tag3', text: 'tag3' } ]
HTM
浏览 0提问于2014-05-14得票数 4
回答已采纳
使用Angular UI Select2指令，并在输入字段上定义标记。如果输入本身在自定义指令中，那么它没有正确初始化，控制台会给出一个错误：
query function not defined for Select2 tagging
我怀疑这可能与编译/链接指令的顺序与调用select 2函数时的顺序有关。
也许有一个简单的解决办法，也许使用编译函数或指令控制器而不是链接函数？或者这可能是Angular UI select2指令的一个问题。
我做了一个柱塞来显示这个问题：
所以我的问题是-如何让select2标记在自定义的Angular指令中工作？
浏览 0提问于2013-03-26得票数 3
回答已采纳
1回答
我正在使用Select2插件开发一个多选下拉菜单。然而，我有一些风格问题，我似乎不能解决。
Select2插件允许您从下拉菜单中选择多个选项，在下拉栏中很好地显示所选的选项。
我想要做的不是在下拉栏中显示，而是在外面显示所选的选项，彼此堆叠在一起(即每行一个)。
以下是我目前的进展：
我想我得玩玩这个选择器
.select2-container{
*:focus{
outline:0px;
}
}
但除此之外，我还不能完全理解它。
我的样式目前产生如下结果：
我希望生成以下内容(全宽，即表格格式)：
如果有人能给我指出正确的方向，我将不胜感激。
谢谢。
浏览 0提问于2018-02-10得票数 0
如何正确验证使用Select2的选项值？在将某个值更改为其他值之前，我遇到了一个问题。它看起来是正确的，但在我更改值之前，会显示验证错误。谢谢你的帮助。
浏览 0提问于2013-12-13得票数 0
1回答
我一直在select2中遇到这个问题。我不能显示初始标签，如select2主页所示：
<input width="100px" type="text" id="e12">
<script>
$(document).ready(function(){
$("#e12").select2({multiple:'true',tags:["red", "green", "blue"]});
});
</script>
但是只有当我开
浏览 0提问于2014-02-27得票数 0
我来这里有个问题。我使用vue.js作为cdn。所以我不能安装npm和使用包。
当我尝试使用jQuery的select2插件时，问题就开始了。它正确地显示了动态到来的选项值，但当我选择一个值时，问题就发生了，vue.js实际上没有得到那个值。我只想告诉你，如果我不使用select2类，它工作得很好，vue会得到这个值。
下面是我的select option部分代码
<select v-model="formData.allowance_id" id="allowance_id"
name="allowance_id" cla
浏览 3提问于2020-05-11得票数 0
我正在广泛地使用Select2。我试图在Select2 .on('change')事件中运行Select2函数，但它不能正常工作。我的代码：
$('.category_select').on('change', function(e){
var scroll_pos = $('#category_'+$(this).select2('val')).offset().top;
$('html,body').scrollTop(scroll_pos);
});
如果滚动位置更大，那么se
浏览 10提问于2015-02-27得票数 1
回答已采纳
我遇到了某种问题，如果我定义了一个范围变量，它会在select2到达select2框之前显示，但是如果我在select2元素之后显示变量，它就不会呈现。
这是我的HTML：
{{stateIsValid}}
<select id="state" name="state" class="select2" ng-change="stateChanged()" ng-model="client.state">
<option value="state">State...&l
浏览 4提问于2014-12-19得票数 1
回答已采纳
2回答
在颜色盒中使用Select2时，无法显示Select2下拉选项。
我在应用程序的其他地方成功地使用了Select2下拉列表，但这是我第一次尝试在彩色框弹出窗口中使用它。
我尝试了这里列出的所有建议，但都没有结果：
我使用的是jQueryv3.1.1、jquery v1.12.1、jquery.Select2 v4.0.3和jquery.colorbox v1.4.29。我的浏览器是IE11。
我像这样打开颜色框(我不使用iframe，模式是默认值"false")：
$.colorbox(
{
href: '/MyDomain/My
浏览 1提问于2017-09-01得票数 2
回答已采纳
我使用的是jquery 2 4.0.0，我想显示一个包含'&‘的文本。
这是选项的代码：
<option value="123">
123 - This & That
</option>
但是，Select2将以下内容显示为选项文本：
123 - This & That
如何让Select2正确地显示专门字符？
浏览 4提问于2015-03-10得票数 7
回答已采纳
1回答
我有前排和后端。从后端我得到预录制的html (Symfony表单)，它包括带有源标记的脚本。原产地是本地的:8001。
<html>
<head>
...
</head>
<body>
...
<div class="container">
{% block javascripts %}
<script type="module" src="http://loc
浏览 1提问于2022-01-11得票数 0
回答已采纳
2回答
我尝试使用Select2创建一个使用web的Behat场景。
当我试图更改select值时，由于基select是由Select2隐藏的，所以出现了Behat错误。
但是我在select2组件上已经有了一个错误，因为mink不能与它交互。
你已经在Select2上使用了Behat/Mink吗？你有帮助我的建议吗？
浏览 10提问于2015-02-02得票数 3
回答已采纳
我收到了来自api的以下json响应：
[
{
"id": 1,
"name": "Juan",
"edad": 20
},
{
"id": 2,
"nombre": "Pepe",
"edad": 26
},
...
]
我想用这个响应填充我的select2 (使用lib ng-select2)，但是显示nombre和edad，例如: Juan - 20
我正确地接收到了响应，但是不能在select2中附加和显示它(我
浏览 2提问于2018-11-03得票数 0
我正在使用Parsley.js来验证表单。我的要求是不能显示错误消息。我只需要突出显示输入字段的边框或选择元素。当data-parsley-errors-messages-disabled出现在select element parsley上时，它不会显示消息，也不会突出显示select2容器的边框。
下面是我的选择代码
<select name="someName" required="required" data-parsley-errors-messages-disabled="" data-required="true"
浏览 0提问于2019-01-02得票数 2
我有一个选择框，在某个事件中，潜在的选择选项会发生变化。
$('#select2').html('')；//清除其现有值$('#select2').append('Option 3')；$('#select2').append('Option 4')；
这段代码在Firefox和Chrome中运行良好。但是，在Internet Explorer8中，html页面上的选项不会改变。当我使用alert($(‘’#select2‘).html())；时，它会提示正确的选项(Option 3，Option
浏览 19提问于2015-01-17得票数 0
1回答
按照这里的说明：
我仍然无法在我的简单的Rails应用程序中显示select2显示器。我确保安装了gem，将//= require select2添加到application.js中，并将*= require select2添加到application.css中。此外，我还在users.js.coffee中包含了以下内容
jQuery ->
$('#user_position_ids').select2
我有一个用户模型，它有很多位置
class User < ActiveRecord::Base
attr_accessible :name, :email
浏览 3提问于2012-08-20得票数 0
1回答
我想在select2插件中使用observableArray作为默认标记，但我正在努力让插件显示我的数组名称属性。
html是这样的：
<div data-bind="with: SelectedText">
<h1>Title: <span data-bind="text: Title"></span></h1>
<div>
<label>A: Local Managers:</label>
<input typ
浏览 1提问于2014-01-05得票数 0
我正在尝试添加一些自定义用户字段到可湿性粉剂用户配置文件页面，但我似乎不能让它工作。我想为设备添加一个下拉列表。根据所选择的设施，我想显示该设施中位置的另一个下拉列表。 我的问题是，无论选择哪个设施，都会始终显示所有位置下拉菜单。 以下是我正在使用的内容： <script>
$(document).ready(function(){
$('#user_facility').change(function() {
if ( this.value == 'option1') {
$('#select1'
浏览 14提问于2019-09-25得票数 0
回答已采纳
我需要捕获页面其他地方的对象的事件(如单击)，而不是select2对象的子对象，而select2对象具有焦点并显示结果。当select2结果对象聚焦时，我不能单击页面其他地方的按钮/锚，让它执行其操作。它只是关闭了select2对象。
有办法这样做吗？下面是一个演示，展示了这种行为：
<!-- Javascript snippet -->
$(document).ready(function() {
$("#e1").select2();
$("#e2").click(function(){
浏览 3提问于2015-01-22得票数 3
回答已采纳
1回答
正在尝试加载音乐人站点的编辑配置文件页面。有一个select2框，其中列出了用户演奏的乐器，并从数据库中提取此信息。但是我不知道如何让现有的仪器列表在渲染时显示在select2上，它总是显示为一个空的select2框(框的实际搜索和选择功能有效)。
(这是meteor中的coffeescript )
在渲染时，它运行：
populator = Meteor.user().profile.instrumentsPlayed
$("#e9").select2()
populator变量定义正确，值为
["acoustic guitar", "piano&
浏览 2提问于2014-07-01得票数 0
1回答
在formatSelection of select2中生成的x可编辑html img中显示时，我遇到了问题。
Select2下拉列表正确显示图像，但x可编辑不显示。
我有：
<a href="#" class="editable-select" data-pk="10" data-url="/my_url/1" data-name="my_data_id" data-value="1" data-type="select2"/></a>
<scrip
浏览 1提问于2013-09-29得票数 2
回答已采纳
如果没有select2，js会下拉下拉列表下面的消息，但是在使用select2之后，会出现错误消息。
我可以在select2 js下拉列表下面或在任何特定位置显示错误消息。
工作代码会有帮助的！
浏览 3提问于2017-09-08得票数 3
我使用DAL从表单域呈现一个自动补全，如下所示：
search = forms.ChoiceField(
widget=autocomplete.Select2(
url='/search/my_search/',
attrs={
'data-placeholder': 'Select an option',
'data-minimum-input-length': 1,
浏览 4提问于2021-04-29得票数 0
为了便于论证，我们采用了“新产品”形式。
我对html表单元素使用了一些javascript库(例如，icheck、select2、wysihtml5)。这些表单元素需要与它们相关的js库函数一起运行，以便在呈现HTML页面之前正确显示(例如$(".checkbox").iCheck({...})。
如果提交表单时出现验证错误，Rails将呈现操作“”，以重新显示"new product“表单，并带有错误(确切地说，在中的"Create”方法中)
问题是，在这种情况下，Rails将不会再次执行相关的javascript文件(例如products.js.coffe
浏览 0提问于2014-01-23得票数 0
回答已采纳
我有两个基于kartik practical A和B的yii2项目，它们都使用johnitvn/ajaxcrudmodal。它看起来像是使用ajax模式创建和更新单页面crud。
我在_form.php中使用kartik select2。
然而，在基于实际A的项目中，它可以谨慎地工作。但在使用实际B的项目中，它显示正确，但搜索框不工作。它不能被点击，我也不能在上面输入任何东西。
我已经将tabindex设置为false。
<?php
Modal::begin([
"id" => "ajaxCrudModal",
"footer&#
浏览 6提问于2016-09-21得票数 0
1回答
我正在使用JQgrid中的Select2插件自动完成下拉框。我使用了这个例子来完成。
我用上面的例子创建了一个小提琴。
select2的数据是从JSON提供的，但是我不能在JSfiddle中复制它，所以我注释掉了并使用了硬编码值。
Json字符串是
[{"value":"Windows","id":"134"},
{"value":"Win2008","id":"135"},
{"value":"Win2003","id
浏览 1提问于2014-01-08得票数 1
1回答
对于select2多个字段来说，这是一个奇怪的问题，在随后的搜索中，下拉搜索消息显示错误。见下文：
标记的蓝色区域是select2字段，标记的红色区域是显示下拉消息的地方。注意，当搜索完成时，结果显示在正确的位置，但由于某种原因，消息显示的位置高于应该显示的位置。
在init上的对白：
$budgetAdmins.select2({
placeholder: 'Type a person\’s name...',
minimumInputLength: 3,
createSearchChoicePosition:
浏览 0提问于2018-02-13得票数 0
你好，如何通过jquery或javascript正确地关闭select2下拉列表？
现在我用select2-dropdown.toggle()来关闭它，
但我注意到它只会隐藏列表，select2框仍在高亮显示。
我想要失去焦点--或者类似的东西--只是为了正确地关闭它，然后才能得到这样的结果。
。
顺便说一句，屏幕截图是黑暗的，因为这些select2框是在引导模式下，每当我按enter键时就会出现。
任何建议都会很感激的！提前感谢
浏览 9提问于2014-02-08得票数 20
回答已采纳
1回答
我正在使用select2插件，并且我需要使用传输函数来执行我自己的ajax请求，因为我需要在request-header中设置API Key。但是一旦我这样做了，select2就会正确地响应结果，并按照我想要的方式格式化和显示结果，但显示的结果是不可选的。我既不能点击它们，也不能用箭头键导航到它们，当我用鼠标经过它们时，也没有任何鼠标悬停的效果。
以下是一些代码(我想显示用户名的建议)：
ajax: {
data: function (term, page) {
return {
Searchtext: term
};
}
浏览 0提问于2013-06-27得票数 3
我已经集成了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回答
我正在尝试用json表单呈现多个select2，但是我不能
$('#resource-form').jsonForm({
schema: {
rest: {
type: 'object',
properties: {
template_id: {
type: "array",
items: {
type: "string",
}
}
}
浏览 0提问于2017-04-09得票数 1
1回答
我已经建立了一个网络应用程序，需要建立一个可搜索的复选框。
我使用过Select2库：。
但是在我的例子中，库不能工作，没有可搜索的输入显示，Select2执行的断点也没有被击中。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel=&#
浏览 1提问于2021-06-03得票数 0
回答已采纳
1回答
我的select2：
element.select2({
allowClear: true,
placeholder: 'blabla',
data: {/*mydata*/}
});
问题是，当添加新数据(手动或通过ajax请求)时，select2不清除选项的列表。
在这方面，我决定手动清除选项列表，因为select2没有相同的方法来清除选项列表。
element.empty().trigger('change');
为了显示新数据，我将select2重命名为相同的元素。
这是很好的工作，但在此之后，select2将第一项数据设置为se
浏览 10提问于2017-02-21得票数 4
回答已采纳
我正在尝试获得一个关于select2工作的非常基本的示例，但我遇到了一些问题。我的控制台中没有显示select2遇到错误的错误，但是测试选择框只显示默认的错误。
<head>
<link rel="stylesheet" href="~/Content/css/select2.css" />
<script src="~/Scripts/jquery-2.2.1.js"></script>
<script src="~/Scripts/select2.js
浏览 0提问于2016-03-18得票数 0
回答已采纳
我正在使用带有select2插件的Angular 4。我已经为jquery和select2添加了@types。Vscode intellisense显示为方法select2，不会抛出任何错误，但angular-cli的编译失败。
浏览 0提问于2017-09-27得票数 4
在我的Laravel5.4应用程序中，我想使用Select2为我的“提供者”过滤：
Select2框显示正确的内容，但当我开始键入提供程序的名称时，它不会过滤正确的项。
当在示例页面上使用相同的内容时，这是可行的。
我做错什么了吗？
问候
kay899
浏览 1提问于2017-04-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
