select2 的错误没有正确显示
Posted
技术标签:
【中文标题】select2 的错误没有正确显示【英文标题】：error with select2 does not appear correctly 【发布时间】：2021-07-22 03:00:15 【问题描述】：您好，希望您能帮助我 问题是当我使用 select 2 它会生成 2 select
没有选择我会这样
<select class="form-control" style="width:50%;" name="" id="">
<option value="">rr</option>
<option value="">dd</option>
</select>
添加示例
但是当我添加 select2 时，我得到了这样的结果
<select class="form-control select2" style="width:50%;" name="" id="">
<option value="">rr</option>
<option value="">dd</option>
</select>
<script>
$(document).ready(function ()
$(".select2").select2();
);
</script>
添加示例2
【问题讨论】：
【参考方案1】： $(document).ready(function()
$('.js-example-basic-single').select2();
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<title>Teste</title>
</head>
<body>
<select class="js-example-basic-single" style="width:50%;" name="put-name-here" id="put-id-here">
<option value="">rr</option>
<option value="">dd</option>
</select>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<title>Teste</title>
</head>
<body>
<select class="form-select form-select" name="put-name-here" id="put-id-here">
<option value="">rr</option>
<option value="">dd</option>
</select>
</body>
</html>据我了解是使用 select2 插件，对吧？
这是因为您将表单控件（一个引导类）与也有自己的 css 参数的 select2 混合在一起。
我认为不建议将两者混合使用。要么使用 select2 及其文档中的选择类，要么使用引导程序。我个人只会使用引导程序。
有一个项目同时使用了第 3 版的引导程序，但我从未使用过。
http://select2.github.io/select2-bootstrap-theme/
供选择2使用：
<select class="js-example-basic-single" style="width:50%;" name="put-name-here" id="put-id-here">
<option value="">rr</option>
<option value="">dd</option>
</select>
<script>
$(document).ready(function()
$('.js-example-basic-single').select2();
);
</script>
用于引导：
<select class="form-select form-select-sm" name="put-name-here" id="put-id-here">
<option value="">rr</option>
<option value="">dd</option>
</select>
【讨论】：
然后我怎样才能让它为我工作，因为如果我只放 classes = select 我会得到同样的扭曲 为 usar somente o bootstrap é só retirar o script e a classe e utilizar somente classes bootstrap 服务。 Caso queira usar mesmo o select2 tem que retirar as classes bootstrap, no seu caso, o form-control e retirar a classe select2。 Adicionar a classe especifica do select2 como por exemplo: js-example-basic-single eative o javascript da mesma forma que está fazendo。 我将编辑我的答案以包含此示例 我仍然得到这个错误，因为两个不同的像照片一样，我已经输入了我自己解释的两种方式 我把它放在代码 sn-p 上供你测试。如果不起作用。能不能放到 git 上测试一下？以上是关于select2 的错误没有正确显示的主要内容，如果未能解决你的问题，请参考以下文章
即使正确的 JSON 格式，Select2 也不显示 AJAX 结果
Laravel 背包 select2_multiple 无法正确显示