01：jQuery的下拉选select2插件用法

1.1 select2插件基本使用

　　1、下载select2插件

　　　　　　1. 下载地址：https://github.com/select2/select2

　　　　　　2、官网地址：https://select2.org/getting-started/basic-usage

　　　　　　3、文件需要引入select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上

　　2、使用原有的 option

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <select class="js-example-basic-single" name="state">

         <option value="2">tom</option>

         <option value="18">naiqiang.xiao</option>

         <option value="19">jian.yang</option>

    </select>

    <link href="/static/select2/select2.css" rel="stylesheet" />

    <script src="/static/jquery-1.12.4.js"></script>

    <script src="/static/select2/select2.js"></script>

    <script>

        $(document).ready(function() {

            $('.js-example-basic-single').select2();

        });

    </script>

</body>

</html>

使用原有的 option

　　3、加载本地数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <select id="select"></select>

    <link href="/static/select2/select2.css" rel="stylesheet" />

     <script src="/static/jquery-1.12.4.js"></script>

     <script src="/static/select2/select2.js"></script>

    <script>

        var data = [

            { id: 0, text: 'enhancement' },

            { id: 1, text: 'bug' },

            { id: 2, text: 'duplicate' },

            { id: 3, text: 'invalid' },

            { id: 4, text: 'wontfix' }

            ];

        $("#select").select2({

         data: data,

         placeholder:'请选择',

         allowClear:true

        })

    </script>

</body>

</html>

加载本地数据

1.2 使用ajax加载远程数据

　　1、参数说明

　　　　　　1.q: params.term 查询参数（params.term表示输入框中内容，q发生到服务器的参数名；所以这里你可以添加自定义参数，如：stype:'person'）

　　　　　　2.processResults中results: data返回数据（返回最终数据给results，如果我的数据在data.res下，则返回data.res。这个与服务器返回json有关）

　　　　　　3.minimumInputLength 最小需要输入多少个字符才进行查询，与之相关的maximumSelectionLength表示最大输入限制。

　　　　　　4.escapeMarkup 字符转义处理

　　　　　　5.templateResult 返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里，当然你可以return repo.text+"1";等

　　　　　　6.templateSelection 选中项回调function formatRepoSelection(repo){return repo.text}

　　　　　　7.关于返回的 json的格式：select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}]，新版严格要求这样的格式，当然你可以添加列，如：[{id:1,text:'text',name:'liu'}]

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        ul li{

            width: 100px;

        }

    </style>

</head>

<body>

    <select id="select" style="width: 400px"></select>

    <link href="/static/select2/select2.css" rel="stylesheet" />

     <script src="/static/jquery-1.12.4.js"></script>

     <script src="/static/select2/select2.js"></script>

    <script>

        $("#select").select2({

            ajax: {

                url: "/data/",

                dataType: 'json',

                delay: 250,

                data: function(params) {

                    return {

                        q: params.term,  // 这里是查询参数，当输入框的值改变时就会实时将此参数提交到后台

                    };

                },

                processResults: function(data) {

                    return {

                        results: data

                    };

                },

                cache: true

            },

            escapeMarkup: function(markup) {

                return markup;

            },

            // minimumInputLength: 10,

            templateResult: formatRepo,

            templateSelection: formatRepoSelection,

            placeholder:'请选择',

            allowClear:true

        });

        // 返回结果回调此函数 repo 是url中返回的数据, 可以在这里对返回数据进行过滤

        function formatRepo(repo){

            return repo.text

        }

        // 选中选项时回调此函数

        function formatRepoSelection(repo){

            return repo.text

        }

    </script>

</body>

</html>

加载远程数据