选择 2：创建可搜索的下拉菜单答案

【问题标题】：Select 2: Creating a searchable drop down选择 2：创建可搜索的下拉菜单
【发布时间】：2021-03-19 19:02:06
【问题描述】：

我正在尝试使用 select 2 在 html/js 中创建一个可搜索的下拉菜单：

   <!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

        
        <title>Testing Select 2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <select style="width: 200px" name ="Select Dropdown" id="selectTest">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
    </select>
    </body>
</html>

<script>
$(document).ready(function() {
    $('.selectTest').select2();
});
</script>

但是，在 apache netbeans 上运行此代码时，结果只是一个普通的下拉菜单。问题是否源于我在头脑中进行安装，我只是按照在线文档进行操作。

任何帮助将不胜感激！

【问题讨论】：

检查您的控制台。您的$.select2 是否在加载 jQuery 和/或 select2 之前触发？
我正在使用 netbeans 创建这个项目，我在运行时是否只检查 firefox 上的控制台？
是的。 Firefox 的开发者控制台。如果它给你一个错误，它可以更容易地追踪问题（例如$ is not defined）
是的，所以刷新页面并检查控制台不会在日志中返回任何内容，不过感谢您的建议！

标签： javascript html css jquery-select2

【解决方案1】：

解决方案：

我没有班级名称，哎呀。这是解决方案：

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

        
        <title>Testing Select 2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <select style="width: 200px" name ="Select Dropdown" id="selectTest" class="js-example-basic-single">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">test </option>
    </select>
    </body>
</html>

<script>
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});
</script>

【讨论】：