使用 select2 的多个选择框（药盒）答案

【问题标题】：Multiple select boxes(pillbox) using select2使用 select2 的多个选择框（药盒）
【发布时间】：2019-04-23 14:58:34
【问题描述】：

我正在使用 select2 使用多选选项（药盒）。使用上面的代码只是给了我一个基本的下拉框。问：我无法获得用户可以输入的搜索框。感谢您抽出时间查看我的查询！这是代码。

<html>
<head>
<title>multiple select</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>Multiple select example
    <div class="selectRow">
        <!-- Using data-placeholder below to set place holder value versus putting in configuration -->
        <select id="multipleSelectExample" data-placeholder="Select an option" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>
</body>
<script>
$(document).ready(
    function () {
        $("#multipleSelectExample").select2();
    }
);
</script>

【问题讨论】：

标签： javascript jquery-select2

【解决方案1】：

请尝试以下我认为您需要将 jQuery 脚本标签放在 select2 之前。而且我认为您需要使用更新版本的 jQuery。

<html>
<head>
    <title>multiple select</title>
    <script src="https://code.jquery.com/jquery-3.4.0.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>

<body>
<p>Multiple select example</p>
<div class="selectRow">
    <!--     Using data-placeholder below to set place holder value versus putting in configuration-->
    <select class="" id="multipleSelectExample" data-placeholder="Select an option" multiple="">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
    </select>
</div>
</body>
<script>
    $(document).ready(
        function () {
            $('#multipleSelectExample').select2();
        }
    );
</script>
</html>

【讨论】：

谢谢山姆。我确实尝试使用最新的 jquery 版本并复制了脚本标签......我没有得到预期的结果。谢谢。
Hey Dee，以上内容在我本地工作。可能值得将以上内容复制到一个新的 html 文件中，看看它是否适合您。如果是这样，只需与您自己的比较即可。