SELECT2 v4.0.5使用整理

最新推荐文章于 2019-04-25 11:20:00 发布

三项超标

最新推荐文章于 2019-04-25 11:20:00 发布

阅读量768

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/pehao/article/details/89418760

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<body>
    <div class="container-fluid">
        <div class="col-md-10">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">select2 js</label>
                    <div class="col-sm-10">
                        <select type="text" class="form-control" id="s1"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">select2 html</label>
                    <div class="col-sm-10">
                        <select type="text" class="form-control" id="s2"></select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <input type="button" id="select2-getval" value="select2 js getval" />
        <input type="button" id="select2-setdata" value="select2 js getdata" />
        <input type="button" id="select2-setval" value="select2 js setval" />
        <input type="button" id="select2-clear" value="select2 js clear" />
    </div>
    <script>

        var data = [{
            id: 0,
            text: 'enhancement',
            code: 'enhancementcode'
        }, {
            id: 1,
            text: 'bug',
            code: 'bugcode'
        }, {
            id: 2,
            text: 'duplicate',
            code: 'duplicatecode'
        }, {
            id: 3,
            text: 'invalid',
            code: 'invalidcode'
        }, {
            id: 4,
            text: 'wontfix',
            code: 'wontfixcode'
        }];

        $("#s1").select2ext({
            ///重写搜索
            matcher: function (params, data) {
                if (!params.term) {
                    return data;
                }
                if (data.code && data.code.indexOf(params.term) > -1) {
                    return data;
                }
                return null;
            },
            选项重写
            templateResult: function (state) {

                if (!state.id) {
                    return state.text;
                }
                return $('<span> id: ' + state.id + ' <span class="label label-success"> text: ' + state.text + '</span></span>');
                return state.text;
            },
            //

            //去掉搜索框
            //minimumResultsForSearch: Infinity,
            data: data,
            //允许为空,可以通过  $("#s1").val(null).trigger('change');设置空值,  默认可以为空
            allowClear: true
        });

        //设置值
        $("#select2-getval").click(function () {

            alert($("#s1").val() + " select2 val:");
        });

        //赋值
        $("#select2-setval").click(function () {

            $("#s1").val(3).trigger('change');
        });

        //设置空
        $("#select2-clear").click(function () {
            $("#s1").val(null).trigger('change');
        });

        //获取当前data,以获取更多属性
        $("#select2-setdata").click(function () {

            var data = $("#s1").select2("data");
            if (data && data.length > 0) {
                data = data[0];
                alert("text: " + data.text + ", id: " + data.id + ", code: " + data.code);
            }
        });

        /*
           //打开面板
           $('#mySelect2').select2('open');
           //关闭面板
           $('#mySelect2').select2('close');

           //添加选项
            var data = {
                id: 1,
                text: 'Barn owl'
            };
            var newOption = new Option(data.text, data.id, false, false);
            $('#mySelect2').append(newOption).trigger('change');
        */
    </script>
</body>

三项超标

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
SELECT2 v4.0.5使用整理

<body> <div class="container-fluid"> <div class="col-md-10"> <div class="col-md-6"> <div class="form-group"> ...
复制链接

扫一扫