Select 2：创建可搜索的下拉菜单

Question

我正在尝试使用 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 上时，结果只是一个普通的下拉菜单。是不是我脑袋里装的问题，我就是按照网上的文档看的。

如有任何帮助，我们将不胜感激！

Answer 1

解决方案：

我没有 class 这个名字，哎呀。解决方法如下：

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

Select 2：创建可搜索的下拉菜单

Select 2: Creating a searchable drop down

html

javascript

css

jquery-select2