select2 的错误没有正确显示答案

【问题标题】：error with select2 does not appear correctlyselect2 的错误没有正确显示
【发布时间】：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

【问题讨论】：

标签： php jquery-select2 codeigniter-4

【解决方案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 上测试一下？