Laravel select2 显示默认 html 多选

Question

我目前正在尝试在 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>

提前致谢。

Answer 1

使用这种方法： 1- 为您的 select 输入提供一个 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>

Answer 2

这是 select2，带有 multiselect 选项。为 select.

设置宽度

<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>

Answer 3

您正在使用 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>

You should use the scripts just before the end the body tag.

Laravel select2 显示默认 html 多选

Laravel select2 showing default html multiselect

jquery

laravel

bootstrap-4

jquery-select2

multi-select