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=" 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>

加载远程数据