javascript 入门之select2功能大全

1.代码较为简单，不作太多讲解，新建一个javascript工程，在index.htl中编写如下代码，根据<link>和<script>标签配制好js和css库便可！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta lang="zh"/>
    <title>select2</title>
    <script src="js/jquery-3.3.1.js"></script>
    <link href="css/select2.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-table.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.js"></script>
    <script src="js/select2.js"></script>

    <script type="text/javascript">
    </script>
</head>
<body>

<div>
    <table id = "demo">
    </table>
</div>

<button onclick="unall()">禁用全部</button>
<button onclick="onall()">启用全部</button>
<button onclick="msg()" id = "btn">select2触发</button>
<button onclick="adddata()">增加数据</button>
<button onclick="adddata_temp()">判断增加数据</button>
<button onclick="setdata()">设置值</button>
<!--给select2设置值-->
<button onclick="setnull()">设置空</button>
<button onclick="getvalue()">得到值(data方法)</button>
<button onclick="getvalue_()">得到值(jquery选择器)</button>
<button onclick="jud_init()">判断是否初始化</button>
<button onclick="kill()">销毁select2</button>
<button onclick="help()">启用select2</button>
<button onclick="on_()">绑定select事件</button>
<button onclick="off_()">解除绑定select事件</button>
<button onclick="trigger()">触发事件</button>

<select class="test" multiple="multiple" style="width:300px">
    <optgroup label="阿拉伯数字">
        <option>1</option>
        <option disabled="disabled">2(禁用)</option>
        <option>3</option>
    </optgroup>
    <optgroup label="汉字">
        <option selected="selected">一</option> //默认选中
        <option disabled="disabled">二(禁用)</option>
        <option>三</option>
    </optgroup>
</select>

<script type="text/javascript">

    function formatState (state) {
        if (!state.id) {
            return state.text;
        }
        var $state = $(
            '<span><img src="' + 'images/1.png" class="img-flag" /> ' + state.text + '</span>'
        );
        return $state;
    };

    function msg(){
        alert('select2点击触发');
    }

    function adddata(){

        var data = {
            id: 6,
            text: '四'
        };

        var newOption = new Option(data.text,data.id,false,false);
        $('.test').append(newOption).trigger('change');
    }

    function adddata_temp(){

        var data = {
            id: 6,
            text: '五'
        };

        if ($('.test').find("option[value='" + data.id + "']").length) {

            $('.test').val(data.id).trigger('change');

        } else {
            var newOption = new Option(data.text, data.id,true,true);
            $('.test').append(newOption).trigger('change');
        }
    }

    function setdata(){

        $('.test').val(['1','三']);
        $('.test').trigger('change');
    }

    function setnull(){

        $('.test').val(null).trigger('change');
    }

    function getvalue(){

        var info = $(".test").select2('data');

        alert('数据类型:' + typeof info);
        alert("数据值:" + JSON.stringify(info));
    }

    function getvalue_(){

        var info = $('.test').find(':selected').data('own');                            //调用自定义 'own' 属性
        alert(JSON.stringify(info));
    }

    function jud_init(){

        if ($('.test').hasClass("select2-hidden-accessible")) {
            alert('已初始化');
        }else{
            alert('未初始化');
        }
    }

    function kill(){

        $('.test').select2('destroy');
    }

    function help(){

        $('.test').select2();
    }

    function on_(){

        $('.test').on('select2:select',function (e) {
            alert(JSON.stringify(e.params.data));
        })
    }

    function off_(){

        $('.test').off('select2:select');
        alert('off select');
    }

    function trigger() { //该函数的执行会触发select2:select事件的执行，即一点trigger按扭会触发select2:select（在本文是on_()函数的执行）

        var data = {
            "id": 10,
            "text": "胡海",
            "nick": "蓝月"
        };

        $('.test').trigger({
            type: 'select2:select',
            params: {
                data: data
            }
        });

    }

    $(document).ready(function () {

        $('.test').select2({
            templateResult:formatState, //下拉列表的格式
            //templateSelection: formatState, //选择后的格式
            dropdownParent:$('#btn'),
            tags: true, //允许自定义值（在框内输入自定义值后回车）
            allowClear: true, //都允许删除
            maximumSelectionLength:2, //最大允许选择两个
            tokenSeparators:[','], //自定义值时，输入','则完成自定义

            createTag: function (params) { //必须包括'@'元素才能完成自定义值
                if (params.term.indexOf('@') === -1) {
                    return null;
                }

                return {
                    id: params.term,
                    text: params.term
                }
            },

            insertTag: function (data, tag) {
                data.push(tag);
            }

            ,templateSelection: function (data,container) {                                     //创建自定义 'own' 属性，值为 'this is my data'
                $(data.element).attr('data-own','this is my data');
                return data.text + typeof container;
            }

        });
    })

    $('#demo').bootstrapTable({
        columns: [{
            field: 'id',
            title: 'ID'
        }, {
            field: 'name',
            title: '商品'
        }, {
            field: 'price',
            title: '价格'
        }, {
            field: 'country',
            title: '国家',

            formatter:function (value,row,index) {

                return'<select class="from" name="states[]" multiple="multiple" onchange="change_value(this.options[this.options.selectedIndex].value)" style="width: 200px">\n' + '</select>';
            }
        }],

        onLoadSuccess: function () { //加载成功时执行a

            console.info("加载成功");
        },
        onLoadError: function () { //加载失败时执行

            console.info("加载数据失败");
        },

        data: [{
            id: 1,
            name: '电脑',
            price: '$1000',
            country:'中国'
        }, {
            id: 2,
            name: '冰箱',
            price: '$500',
            country:'美国'
        }, {
            id: 3,
            name: 'country',
            price:'$10000',
            country: '意大利'
        }]

    });

    function init() {


        var countrys = [

            '中国',
            '美国',
            '意大利'
        ];

        $('.from').select2({

            data:countrys
        });

    }

    function unall(){
        $('.from').prop('disabled',true);
    }

    function onall(){
        $('.from').prop('disabled',false);
    }

    function change_value(value){
        alert('change:' + value);
    }

    $(document).ready(function () {
        init();
    })

    $('.from').on('select2:open',function () {
        alert('on open');
    })

    $('.from').on('select2:select',function () {
        alert('on select');
    })

    $('.from').on('select2:close',function () {
        alert('on close');
    })

    $('.from').change(function () {
        alert('change');
    })

    $('.from').on('select2:unselect',function () {
        alert('on unselect');
    })

    $('.from').on('select2:opening',function () {
        alert('on opening');
    })

    $('.from').on('select2:selecting',function () {
        alert('on selecting');
    })

    $('.from').on('select2:unselecting',function () {
        alert('on unselecting');
    })

    $('.from').on('select2:closing',function () {
        alert('on closing');
    })


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

注意：

1.想要正确运行本项目，需要在项目根目录创建images目录，并放置一张 '1.png' 的图片

运行结果：

javascript 入门 之select2功能大全

猜你喜欢

javascript 入门之select2功能大全