Laravel select2 显示默认的 html 多选答案

【问题标题】：Laravel select2 showing default html multiselectLaravel select2 显示默认的 html 多选
【发布时间】：2020-01-16 08:01:27
【问题描述】：

我目前正在尝试在 Laravel 项目中使用 select2 来创建多选，但我有点卡在了蝙蝠的右边。 js 和 css 文件链接正确，但是当我重新加载页面时，它只显示来自 html 的默认多选。

代码：


<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Titel</title>
    <link href="http://web-application.test/select2/dist/css/select2.min.css" rel="stylesheet" />
    <script src="http://web-application.test/select2/dist/js/select2.min.js"></script>
</head>
<body>
<script>
    $(document).ready(function() {
        $('.js-example-basic-multiple').select2();
    });
</script>
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>
</body>
</html>

提前致谢。

【问题讨论】：

标签： jquery laravel bootstrap-4 jquery-select2 multi-select

【解决方案1】：

您正在使用 select2 而不使用 jQuery。您应该在浏览器控制台中收到错误消息，例如 $ / jQuery is not defined。检查您的script 和css 文件。我已经使用了所有cdn并测试了以下代码。它工作正常。你可以这样试试。

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Titel</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
</head>
<body>
    <select class="js-example-basic-multiple" name="states[]" multiple="multiple" style="width:1000px">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
        <option value="WY">Wyoming</option>
        <option value="WY">Wyoming</option>
        <option value="WY">Wyoming</option>
        <option value="WY">Wyoming</option>
        <option value="WY">Wyoming</option>
        <option value="WY">Wyoming</option>
    </select>
    <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.js-example-basic-multiple').select2();
        });
    </script>
</body>
</html>

您应该在body 标记的末尾使用scripts。

【讨论】：

【解决方案2】：

这是带有multiselect 选项的select2。设置选择的宽度。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Titel</title>
</head>
<body>
<script>
    $(document).ready(function() {
        $('.js-example-basic-multiple').select2({width:'100%'});
    });
</script>
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>
</body>
</html>

【讨论】：

【解决方案3】：

使用这种方法： 1-为您的选择输入提供一个ID 2- 将你的脚本放在正文之后

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Titel</title>
    <link href="http://web-application.test/select2/dist/css/select2.min.css" rel="stylesheet" />
    <script src="http://web-application.test/select2/dist/js/select2.min.js"></script>
</head>
<body>

<select class="js-example-basic-multiple" id="select2" name="states[]" multiple="multiple">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>
</body>
<script>
    $(document).ready(function() {
        $('#select2').select2();
    });
</script>
</html>

【讨论】：