带搜索框的下拉框-select2的简单用法（包括在angular下使用）

最新推荐文章于 2024-08-20 15:41:26 发布

熊叁(san)

最新推荐文章于 2024-08-20 15:41:26 发布

阅读量1.5w

点赞数 2

分类专栏：前端笔记

本文链接：https://blog.csdn.net/littlebearGreat/article/details/79553928

版权

前端笔记专栏收录该内容

126 篇文章 2 订阅

订阅专栏

下拉框内容比较多的时候，带个搜索框体验就比较好了，今天找了一个，最终使用select2，写了个简单的用法，以后方便。

下面仅仅是html代码，源码在

https://gitee.com/xxsheep/codes/qli4e681wy7uf5on9g2c053

<!-- demo.html  select2用法说明 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="select2.min.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script src="select2.full.min.js"></script>
    <title>select2用法说明</title>
    <style>
        h1,h2,h3{
            text-align: center;
        }
        .select1{
            margin: 60px auto 0;
            width: 200px;
        }
        .select1>span{
            width: 100% !important;
        }
    </style>
</head>
<body>
    <h1>select2用法说明</h1>
    <h2>具体用法看代码（包括在angular中的用法）</h2>
    <h3>更多功能用法请百度搜索“select2”去官网查看</h3>

    <div class="select1">
        <select class="mySelect">
            <option>西瓜</option>
            <option>苹果</option>
            <option>香蕉</option>
            <option>菠萝</option>
            <option>桃子</option>
        </select>
    </div>
<script>
    $(function(){
        $('.mySelect').select2();
    })
</script>
<!-- 说明：
            1.select2依赖于jquery，要引入select2.min.css、select2.full.min.js
            2.如果要多语言，请去官网下载多语言js；此select2.full.min.js文件，我把搜索无结果时改成了中文。
    
    用法：
            1.以上用法是一般用法
            2.下面介绍用于angular ng-repeat渲染出的dom的用法

                a.  html代码是：
                    <div class="tt_select2">
                        <select class="js-example-basic-single">
                            <option time-out ng-repeat="x in data" value="{{x.className}}" ng-bind="x.className"></option>
                        </select>
                    </div>
                b.  要在n-repeat渲染结束后再执行  $('.mySelect').select2()，所以调用指令，延迟执行;
                c.  自定义指令代码：
                    app.directive('timeOut',function($timeout){
                        return { 
                            link: function(scope,element,attr){ 
                                $timeout(function(){ 
                                    $('.js-example-basic-single').select2();
                                },0) 
                            } 
                        } 
                    });
-->
</body>
</html>

如何获取选中的标签呢？

可以使用onchange事件或者jquery的change事件。

要得到更多的数据，我们可以把数据当做标签的属性绑在标签上。

下面是代码

$('.mySelect').change(function () {
	var text = $(this).find(':selected').text();
	var id = $(this).find(':selected').attr('ttId');
});

熊叁(san)

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录