jQuery的select2下拉框的搜索功能(使用select2插件，方便简单)

最新推荐文章于 2024-06-28 16:12:55 发布

置顶 wJulio

最新推荐文章于 2024-06-28 16:12:55 发布

阅读量3.7w

点赞数 7

分类专栏： jQuery 文章标签： select2

本文链接：https://blog.csdn.net/wJulio/article/details/80910909

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一步:

引入我们用使用的插件

jquery:

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

select2：

css:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />

js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

第二步:

创建一个html页面，body内容:

        <div>
            <select class="singleSelect" style="width: 200px;">
                <option value="">--请选择--</option>
                <option value="">阿里</option>
                <option value="">阿姨</option>
                <option value="">江南</option>
                <option value="">杭州</option>
                <option value="">无锡</option>
                <option value="">上海</option>
            </select>

        </div>

第三步:

书写js脚本，调用我们的js方法

    <script type="text/javascript">

        $(document).ready(function() {
                $('.singleSelect').select2();

            });

</script>

第四步:

效果图

-------------------------------------------------------------------------------------------------------------------

有个朋友新版版不能使用backspace删除输入框中的值

jQuery：https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js

select：https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css

https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js


html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js" ></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js" ></script>
    <style>
        
    </style>
    <body>
        <div>
            <select class="singleSelect" style="width: 200px;">
                <option value="">--请选择--</option>
                <option value="">阿里</option>
                <option value="">阿姨</option>
                <option value="">江南</option>
                <option value="">杭州</option>
                <option value="">无锡</option>
                <option value="">上海</option>
            </select>

        </div>
            <script type="text/javascript">

        $(document).ready(function() {
                $('.singleSelect').select2();

            });

        </script>
    </body>
</html>

效果图，大家编译查看一下

wJulio

关注

7
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
29
评论
jQuery的select2下拉框的搜索功能(使用select2插件，方便简单)

第一步:引入我们用使用的插件jquery:<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>select2：css:<link href="https://cdnjs.cloudflare.com/aj...
复制链接

扫一扫